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FreeBSD Programming 
Primer —- Part 1 








In this new series we will look at the tools, processes and methods 
involved in writing software, including developing a Content 
Management System (CMS) which will run under an AMP stack on 


FreeBSD, OpenBSD, Linux, etc. 


What you will learn... 
- How to to configure a development environment and write HTML, 
CSS, PHP and SQL code 


ithin the I.T. environment there are many disci- 
VV plines, and often these skill sets work in isola- 

tion. The sys-admin doesn't always understand 
the challenges faced by the programmer or developer, 
the support engineer doesn't understand the problems 
of the developer, and the project manager doesn't under- 
stand the problems of the technical staff. In this new se- 
ries, we will examine from first principles how to devel- 
op a CMS that will run on any Apache / MySQL / PHP 
stack. This will involve writing HTML, CSS, PHP and 
SQL code. 


Code is Everywhere 

To the uninitiated, writing computer code from scratch 
may seem a challenge. Certainly, some programming 
languages are more complex than others, but the fact 
remains you have already programmed some device 
at some stage without realizing it even if you have not 
been near the command line (for example a VHS re- 
corder, central heating timer etc.). As a result you have 
instructed the device to do something (Record the 
Simpsons at 10:00PM on Friday evenings). Software is 
effectively just a collection of instructions, logic and ac- 
tions like this that allow the computer to interact with 
another computer, an end user or just itself. The skill 
is in writing good code that meets the following guiding 
principles: 
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What you should know... 


¢ BSD and general PC administration skills 


¢ Does “what it says on the tin” 

¢ Is user friendly 

¢ Is secure and reliable under stress 

¢ Is fast and efficient (Don't Repeat Yourself) 
¢ Is easily modified and extended 

¢ Can be easily understood 

¢ Has documentation 


While some of these points are essential to any piece 
of software, some may be more important than oth- 
ers depending on the operating environment and spec- 
ification. For instance, a piece of code that pulls pag- 
es from a website on a daily basis into a a new direc- 
tory in the format day_month_year (like 01 01 2013, 
O02 01 2013 etc.) for later reading by a technician would 
not necessarily require anything other than a log file en- 
try saying “404 Not Found” if no content was available. 
However, if this was a critical program designed for an 
end user, it would be better practice to raise a friendly 
error message e.g. “The page you requested was not 
found. Please try again later or contact the helpdesk on 
123 456789". 

Software writing should be creative and enjoyable, 
and part of the challenge is to have a reasonable idea 
of what you want to achieve beforehand, who your audi- 
ence is, what limitations you must consider, and the en- 
vironment the software will run under. A good functional 
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specification should cover these details, but it is im- 
portant to realize that software is never really finished. 
More functionality may be required, the environment 
may change, or bugs and faults need to be rectified in 
the program. That is why code should be easily modified 
and understood as it is the programmers worst night- 
mare having to maintain a badly written, undocument- 
ed, broken program. Trying to get inside someone else's 
logic especially when under pressure to meet deadlines 
can be very stressful! 


Computers Are Not Very Clever 

The old adage “Garbage In = Garbage Out” is most ap- 
plicable in the area of programming. As CANVC, they can 
only literally interpret any instructions that they receive. 
For instance, you might think you have asked the program 
to print the date, but due to an error in your logic, it might 
return 01-01-1970, NULL, or UNDEF. It might not even re- 
turn anything at all. Sometimes when writing code you will 
be convinced the computer is your enemy. This is where 
defensive programming and debugging come to the fore, 
by re-thinking the obvious (and not so obvious) assump- 
tions such as “All input data is valid”. The defensive pro- 
grammer would respond by saying “All data is important 
and tainted unless proved otherwise”. Expect the unex- 
pected. Sometimes it is best to walk away, take a break 
and return to the problem later. Late night coding sessions 
can be frustrating, especially if the result is not what is ex- 
pected. Trying to debug an issue without a decent IDE (In- 
tegrated Development Environment) is possible, but time 
consuming. 


Choosing the Language 

Not all programming languages are equal, and some are 
less equal than others. Different languages are geared to- 
wards different tasks. 

Shell programming languages (for example Bash, Sh 
etc.) are great for system administration tasks e.g. clear- 
ing out and archiving directories, running commands de- 
pending on the user response etc. However they are not 
fully fledged programming languages as such. 

BASIC and Pascal are great for learning how to code, 
but they have some limitations. While it would be possible 
to write a CMS in either of them, as they are not primarily 
geared towards the web the program would be complex 
and convoluted. 

The same argument applies to C. C is extremely power- 
ful and flexible and PHP, Apache and MySQL are written 
using it. lt would be complete overkill to write the CMS in 
scratch from C as we would effectively have to re-invent 
the wheel. 
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Java would make a great platform for a CMS due in part 
to its extensive library support and security, but as it is 
object orientated rather than procedural, the code and un- 
derlying principles would be more complex. 

Script based languages (for example Ruby, Perl, Py- 
thon, PHP) are geared towards the Internet, and most 
ISP's will support them. As PHP has good support, is very 
portable, the documentation is excellent, and integrates 
well with both Apache (Our web server software) and 
MySQL (our database) it is a strong choice. While the the 
other script languages are just as suitable for our CMS, 
the author has more experience with PHP so that is the 
reason for the choice. 

SQL, HTML and CSS are different types of language. 
While not considered “real” programming languages as 
such (on their own you could not write a software applica- 
tion) they are essential to our CMS. 

SQL (Sequential Query Language) is the de facto stan- 
dard language of databases. While most databases today 
use some form of SQL to extract, view and alter data, the 
“dialect” differs from database to database. We will use 
SQL to fetch our dynamic content from our database. 

HTML (Hyper Text Markup Language) is the language 
of the web page. Each document has separate elements 
e.g. a body, header, images etc. and the HTML stan- 
dard defines what these elements are. HTML pages are 
served by Apache and interpreted by the client browser 
e.g. Firefox. 

CSS (Cascading Style sheets) are used in conjunction 
with HTML to change the style of the raw HTML pages. 
While it would be possible to write a CMS without it, it 
would probably not be very aesthetic. 

JavaScript is a lightweight programming language used 
for dynamic tasks in conjunction with HTML e.g. chang- 
ing content on the fly. It is run seamlessly from the client 
browser. 

Generally, programming languages fall into 2 catego- 
ries, complied and interpreted. For instance C, Basic 
and Pascal are compiled whereas most script languag- 
es are interpreted. The major difference between com- 
piled and interpreted languages is how the program itself 
is accessed and run. In the compiled scenario, the initial 
source code is passed though a compiler which generates 
a stand-alone binary if the source code is valid. The oper- 
ating system then handles the corresponding output. A bi- 
nary compiled for one particular Operating System will not 
run on another — in general the compiler has to match the 
O/S unless some form of emulation and library support 
is available. With interpreted languages each line of the 
source code is passed through the interpreter which han- 
dles the corresponding output. Both language types sup- 
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port additional libraries which extend the core functionality 
of the language (e.g. graph support) and these are used 
as required. See Figure 1 and Figure 2 — Compiled and 
Interpreted languages. 

The bottom line is that you need to choose your lan- 
guage for the task you have in hand. Some all purpose 
languages are great but you need to remember the limita- 
tions. The author often uses PHP for add-hoc scripts, but 
Perl or Bash would be just as effective. Often it is a case 
of what you feel most comfortable with, but at the same 
time you don't want to fall into the trap “When the only tool 
you have is a hammer every problem is a nail’. 


To err is Human 

Writing code is paradoxically both infinitely creative and 
flexible yet structured and pedantic. One missed semico- 
lon, a full stop in the wrong place, even word case can be 
the difference between a working code segment and an 
esoteric error message. Sometimes by fixing one problem 
other problems are introduced, sometimes the real prob- 
lem was never addressed at all. It is important that we are 
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Figure 1.A compiled program 
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Figure 2. An interpreted script 
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able to snapshot and document our changes as well as 
quickly isolate any problems. As part of the series we will 
look at version control and debugging. 


The Draft Specification 

The initial specification of our CMS is per Table 1. Further 
additions may be made over the series to demonstrate 
specific principles. The inspiration for parts of the speci- 
fication came from the excellent CMS, Drupal by Dries 
Buytaert. 


Testing 

It is critical that any application is properly tested before 
release. While automated testing methods are available, 
for the purpose of this series will limit testing to some 
crude load and security testing and ensuring that the pro- 
gram “just works as advertised”. 


The Development Environment 
In a commercial environment, the bare minimum would 
probably consist of a test (development) server, a live 


Table 1. CMS draft specification 
Initial CMS Specification 


Allow an authorised user to create a W3C valid web page 
Database transactions (MySQL InnoDB storage engine) 
Efficient search 

Image and attachment uploads 

Menu module 


Modular and extensible 

Run under a standard AMP stack with little modification 
Support XHTML 1.0 strict 

Taxonomy 

Template and region driven — separate the rendering logic from 
page content 

Visitor statistics 





ee | 


Apache 





File Server 


NIC 


Figure 3. Our CMS architecture 
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(production) server, a Version Control Server (VCS), 
possibly a database server (MySQL) and the develop- 
ers workstation with an Integrated Development Environ- 
ment (IDE) for code development, syntax checking and 
debugging. Source code would be pulled from the VCS, 
edited and tested on either the workstation or the devel- 
opment server, committed to VCS and pushed to the pro- 
duction server for access by the users when stable and 
ready for release. This scenario is too complex for our 
series, but while it is possible to develop just from the 
command line, debugging (and certainly testing) will be 
close to impossible outside of a graphical environment. 
As a very bare minimum, you will need a headless Free- 
BSD box (without any GUI) and some sort of workstation 
with Firefox installed, but ideally your BSD development 
box should support Firefox, Netbeans, Apache. PHP, GIT 
and MySQL. Your favorite CLI editor can of course still be 
used for editing. 


In the Next Article 
We will start programming in earnest and start serving our 
first CMS page. 


ROB SOMERVILLE 

Rob Somerville has been passionate about technology since 
his early teens. A keen advocate of open systems since the mid 
eighties, he has worked in many corporate sectors including fi- 
nance, automotive, airlines, government and media in a_ vari- 
ety of roles from technical support, system administrator, de- 
veloper, systems integrator and IT manager. He has moved on 
from CP/M and nixie tubes but keeps a soldering iron handy just 
in case. 
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The BSD Certification Group Inc. 
(BSDCG) is a non-profit organization 
committed to creating and 
maintaining a global certification 
standard for system administration 
on BSD based operating systems. 





@ WHAT CERTIFICATIONS ARE AVAILABLE? 


BSDA: Entry-level certification suited for candidates 
with a general Unix background and at least six months of 
experience with BSD systems. 


BSDP: Advanced certification for senior system administrators 
with at least three years of experience on BSD systems. 
Successful BSDP candidates are able to demonstrate 

strong to expert skills in BSD Unix system administration. 


@ WHERE CAN I GET CERTIFIED? 


We're pleased to announce that after 7 months of 
negotiations and the work required to make the exam 
available in a computer based format, that the BSDA 
exam is now available at several hundred testing centers 
around the world. Paper based BSDA exams cost $75 USD. 
Computer based BSDA exams cost $150 USD. The price of 
the BSDP exams are yet to be determined. 


Payments are made through our registration website: 
https://register.6sdcertification.org//register/payment 


@ WHERE CAN | GET MORE INFORMATION? 


More information and links to our mailing lists, LinkedIn 
groups, and Facebook group are available at our website: 
http://www.6sdcertification.org 


Registration for upcoming exam events is available at our 
registration website: 
https://register.bsdcertification.org//register/get-a-bsdcq-id 
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Primer — Part 2 


In the second part of our series on programming, we will look at 
configuring our development server, write our first lines of code 
and commit the changes to a version control system. 


What you will learn... 
- How to to configure a development environment and write HTML, 
CSS, PHP and SQL code 


BSD test server available with the AMP (Apache 
/ MySQL / PHP ) installed. We will also use a ver- 
sion control system (VCS) and a CLI based text editor. | 
am using FreeBSD 9.0 with VI, MC (for file management) 
and GIT running under Virtualbox. 
Start by installing FreeBSD from DVD and con- 
figure networking, user and root accounts, etc. as 
normal. 


B efore we get started, you need to have a Free- 


Key 

¢ Command line instructions 

¢ Alterations to configuration files 
¢ MySQL prompt / SQL 

¢ HTML/ XHTML / PHP code 
Part 1. Installing the Software 


Step 1 
As root, Install mc and git from packages: 


dev# pkg add -r mc git 
Step 2. Upgrade the Ports Tree 


dev# portsnap fetch && portsnap extract 
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What you should know... 


¢ BSD and general PC administration skills 


Step 3. Install Apache 


dev# cd /usr/ports/www/apache22 


dev# make install clean 
Configure rc.conf to start Apache on reboot: 
dev# echo 'apache22 enable="YES"' >> /etc/rc.conf 


Ensure hosts has your machine name set in /etc/hosts 
otherwise Apache will not start. 


oe localhost dev 
Ve gills 0 ak 


localhost dev 
Start Apache: 
dev# /usr/local/etc/re.d/apache22 start 


Step 4. Install MySQL 


dev# cd /usr/ports/databases/mysgl55-server 


dev# make install clean 
Start MySQL: 


dev# echo 'mysql enable="YES"' >> /etc/rc.conf 
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dev# /usr/local/etc/rc.d/mysgl-server start 
Set the MySQL root password and check MySQL works: 


dev# /usr/local/bin/mysqladmin -u root password 'cms- 
password' 
dev# rehash 


dev# mysql -uroot -pcms-password 
mysql>\q 


Step 5. Install PHP5 and Language Extensions 
Enable and build apache module. See Figure 1. 


dev# cd /usr/ports/lang/php5 


dev# make config 
Install PHP5 and the extensions: 
dev# make install clean 
Enable mysql and mysqli support. See Figure 2. 
dev# cd /usr/ports/lang/php5-extensions/ 
dev# make config 


dev# make install clean 


Edit /usr/local/etc/apache22/httpd.conf to reflect the 
following: 


DirectoryIndex index.html index.xhtml index.php 
And add the following at the end for PHP support: 


AddType application/x-httpd-php .php 
AddType application/x-httpd-php-source .phps 


Copy the php.ini file across: 





Options for php5S 5.4.11 





CLI Build CLI version 
Build CGI version 





| | FPM Build FPM version 
APZFILTER Use Apache 2.x filter interface (experimental) 
{[ ] EMBED Build embedded library 
{ ] DEBUG Enable debug 
[ ] DTRACE Enable DTrace support 
[*] IPv6 Enable ipvG support 
[ ] MATLHEAD Enable mail header patch 
[ ] LINKTHR Link thread lib (for threaded extensions) 


<Cancel> 


ae 





Figure 1. Enabling the Apache module 
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dev# cp /usr/local/etc/php.ini-development 


/usr/local/etc/php.ini 
Restart apache to pick up the new PHP extensions: 
dev# /usr/local/etc/rc.d/apache22 restart 


Now we need to setup a development area in our home 

directory. We will create an account with username dev: 
dev# adduser 

Follow the prompts (the defaults are fine), and give the 
new user a password. We want to edit / develop as dev, 

so move the apache data directory across to /home/deV 

and symlink back. That way, Apache can serve the files 


we create as a non-root user aS we can run GIT as a 
normal user: 


dev# mv /usr/local/www/apache22/data/ /home/dev/ 

dev# chown dev:dev datapwd 

dev# In -s /home/dev/data/ /usr/local/www/apache22/data 
dev# cd /home/dev/data 

dev# chown dev:dev index.html 


dev# /usr/local/etc/rc.d/apache22 restart 


If you visit your dev box with a browser (http:/vyouripa- 
dress) you should see the standard Apache “It works!” 
welcome page. 


Part 2. GIT Revision Control and our Test Pages 
As a developer, a version control system is an important 
tool not only to track code changes, but to allow quick re- 
covery from mistakes. Once a file is added and committed 
to the repository, any errors can be quickly rectified by roll- 
ing back to a previous version. 

Login with (or su to) the new DEV user account, change 
to the data directory, and create a new repository then 


Options for phpS-extensions 1.7 


HASH Message Digest Framework 
iconv support 
IMAP support 
Interbase 6 database support (Firebird) 
JavaScript Object Serialization support 
OpenLDAP support 
multibyte string support 
Encryption support 
MS-SQL database support 

SQL database support 
het] ME Let Et tele elele 
ODEC support 
OpenSSL support 
pentl support (CLI only) 





<Cancel> 
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Figure 2. Enabling MySQL support 
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commit index.html to it after setting your details. When 
prompted in the editor, the commit message should be 
“Initial Load”. 


devi 
devi 
devi 
devi 
devi 
devi 
devi 


su dev 

cd /home/dev/data/ 

git config --global user.name "dev" 
git config --global user.email dev@dev 
Ole ae 

git add -* 


git commit 


PHP Version 5.4.11 





el | FreeBSD dev 9.0-RELEASE FreeBSD 9,0-RELEASE #0: Tue Jan 3 07:15:25 UTC | 


pee IE 12 root@obrian.cse.buffalo.edu:/usr/obj/usr/src/sys/GENERIC i386 


Build Date — Date Feb 2 2013 00:08:03 


Sulla Date _| ‘Joonfigure’ '--with-layout=GNU" '--localstatedir=/var' '--with-config-file-scan- 
Command dir=/usr/local/etc/php' ‘--9isable-all’ '--enable-libxml’ '--enable-mysqlnd' 


-Wwith-libxml-dirs/usr/local’ '--with-pcre-regex=/usr/local’ '"~with- 
cea arta ‘_.program-prefix= '--with-apxs2=/usr/local/sbinjapxs" ‘--with- 
egex=php' *--with-zend-vm=CALL' '--prefix=/usrlocal’ ‘~mandir=a/usr 
Reealiinan’ ‘-(nfodir=/usr/local/info" '"-build=(386-portbld-freebsd$.0° 


Server API Apache 2.0 Handler 


Virtual disabled 
Directory 
Support 
Configuration =| /usr/localfete 
=e us lobe ini) 
fusr/local/ete/php.ini 
Configuration 
a this dir for |/usr/local/ete/php 
additional .ini 
files 
Additional .ini = |/usr/local/etc/php/extensions.ini 
files parsed 


20100525 
—j Extension |220100525 


Zend Extension |API220100525,NTS 





Figure 3. PHP enabled 





Listing 1. The modified Apache index.xhtml 
<html><body><h1>Hello World!</h1></body></htm1> 


Listing 2. index.xhtml 


<?xml version="1.0" encoding="UTF-8"?> 
—DOCL GE iene nUP ine ste WSC) Dl De HiMitei Om ominkety)/ Eee) bien las tietetm cited 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 


<head- 
<title>My first XHTML page</title> 
</head> 
<body> 
<p>Hello world</p> 
—/ body 
noni 


Listing 3. phpinfo.php 
<7phip Phpinie () > 





This will commit the original index.html to the new GIT 
repository. Edit index.html to reflect Code Listing 1 — 
“Hello World” is always the first statement written in ex- 
perimental code. Check with your browser that the page 
has changed (you may need to press Shift F5 to refresh 
the cache). Now commit it to the repository: 


dev# git commit -am "First line of HTML" 
To view the change log: 

dev# git log 

Now delete index.html. To recover: 


dev# git checkout index.html 


ke has log 

commit 30e3/7cee547 pio. eee M4c68b3b941a>focc 
Author: dev <dev@dev 

Date: Sat Feb , 63:12:58 2013 +0000 


~MHTML and PHP test page 


commit Sa S MS od be dak 39778 7d4c4abdi1614d46e 
Author: <dev@dev> 
Feb 2? 02:08:48 2013 +0000 


1 load 


Figure 4. Git log 
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Further reading 

¢ GIT VCS - http:/githowto.com 
PHP — http:/php.net 
W3 Schools — http:/www.w3schools.com 
W3C - http://www.w3.org 











To go back to the original Apache file (Where 0007073d 
is the first 8 digits of the file checksum) and overwrite 
your changes permanently: 


dev# git checkout 0007073d 


Now the log will only show the original file. Create two 
files index.xhtml and phpinfo.php with the code from 
code Listing 2 and 3 respectively and add and commit to 
the repository: 


dev# git add * 
dev# git commit -am "XHTML and PHP test page " 


dev# git log 


You should see a log file similar to Figure 4. 

Listing 1 is a standard XHTML page, with the XML and 
document type defined. In the next article, we will look at 
adding CSS and Javascript to this skeleton, but the impor- 
tant point to note here is that all the tags are “balanced” — 
every opening tag (e.g. <p>) has to have a matching clos- 
ing tag. To view this page, visit http://vouripaddress/index. 
xhtml in your browser. 

Listing 2 is a very simple PHP command — phpinfo (); 
displays all the configuration values, modules loaded 
etc. available to the PHP interpreter. You should see a 
page similar to Figure 3 if you visit http://vouripaddress/ 
phpinfo.php. 


In the Next Article 

We will look at code structure, program flow and how to 
embed CSS and Javascript in out pages. We will also 
start using SQL to dynamically generate pages. 


ROB SOMERVILLE 

Rob Somerville has been passionate about technology since his ear- 
ly teens. A keen advocate of open systems since the mid eighties, he has 
worked in many corporate sectors including finance, automotive, air- 
lines, government and media in a variety of roles from technical support, 
system administrator, developer, systems integrator and IT manager. 
He has moved on from CP/M and nixie tubes but keeps a soldering iron 
handy just in case. 
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Primer — Part 3 


In the third part of our series on programming, we will look at code 
structure, program flow and how to embed CSS and Javascript in 
our pages. We will also start using SQL to dynamically generate 


web pages. 


What you will learn... 
- How to to configure a development environment and write HTML, 
CSS, PHP and SQL code 


basic construction of our programming language 
(PHP), the directory and functional structure of our 
CMS and how this all fits together. 

Our CMS will be designed to be as extensible as pos- 
sible, and will follow the design as detailed in Figure 1. 
Pages will be stored in the MySQL database, merged with 
the header, templates, CSS and Javascript and returned 
to the client browser. This will allow us to separate design 
from content efficiently. 


B efore we start coding in earnest, we will look at the 


Part 1. PHP Fundamentals 
Any language — both verbal and programming — compris- 
es of separate elements that fit together in a logical struc- 
ture that communicates meaning to the recipient. For lan- 
guage to be effective, rules are strictly defined, not only to 
preserve efficiency but to prevent misunderstanding. For 
example, a written sentence will comprise of nouns, verbs 
and adjectives — likewise computer code will consist of 
variables, expressions and control structures. The main 
functional difference between a human language such as 
English and a programming language is flexibility and in- 
terpretation — as humans we are adaptable enough to in- 
terpret a missing full stop or misspelled word correctly, 
whereas a computer will fail miserably. 

Here will will look at some of the the basic building 
blocks of PHP. 
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What you should know... 


¢ BSD and general PC administration skills 


The following code examples can be created in the ex- 
amples directory using your favorite editor (in this case | 
am using VI). Login to the webserver using SSH or from 
the console, switch to the DEV account from root and cre- 
ate the files: 


dev# su 
dev# su dev 
dev# cd /home/dev/data/ 


dev# mkdir examples 


Browser request 
Page = 






Reoord 
1 


mw) ce 





ere, 





Figure 1. CMS design 
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dev# cd examples 


dev# vi examplel.php 


The example can then be run from: http://yourserveri- 
paddress/examples/example1.php (see Figure 2). 

You do not need to run the examples to develop a work- 
ing CMS, but they are useful to experiment with. Change 
values and experiment. 


PHP tags 

All PHP code requires an opening <?php tag. The closing 
?> tag is only necessary when combining PHP with Javas- 
cript, HTML etc. 


Comments 
ln PHP comments are denoted with //. A block of com- 
ments can also be with a block using /* ... */. 


Expressions 

To quote the PHP website “Expressions are the most im- 

portant building stones of PHP. In PHP, almost anything 

you write is an expression. The simplest yet most accurate 

way to define an expression is “anything that has a value”. 
For instance, if the server has 3 disk drives this could 

be written as: 


<?php 
edisk drives = 3; 


Constants 

A constant is useful where the the value will not change 
across the execution of the script. Unlike variables, con- 
stants are accessible within function calls and throughout 
the script, whereas variables may be local only to that par- 
ticular function. This aids program readability. 





Lia 
| 
| 


Figure 2. example!.php running via a browser 
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The circumference of a circle is calculated by multiplying 
the diameter by PI (3.14). As Pl is a constant and will not 
change, we can define PI as a constant. See Listing 1. 


Variables 

A variable holds the result of an expression or statement. 
As the name implies, the value of the variable will change 
over the life of the program. The variable name is defined 
on the left hand side of the = sign and the value of the vari- 
able is defined on the right hand side see Listing 2. 


Data types 

Data types, as the name suggests, define what type of da- 
ta we can hold in a variable or constant. The basic types 
are booleans, integers, floats, strings, and arrays. 


Booleans 

A boolean is used where a dual state is useful. A boolean 
has one of two values, TRUE or FALSE. For instance, 
we can define the constant DEBUG and act accordingly 
depending on how DEBUG evaluated by the “if’ control 
structure: see Listing 3. 





Listing 1. example!l.php 


<?php 


/* 
* examplel.php 

“eons ban rs 

* Define PI as the constant 3.14 and output the result. 


* 


a 


define (“PI”, 
echo PI; 


3.14); 


Listing 2. example2.php 
<7 hip 


We 
* example2.php 
* Variables 
* Define circumference as the variable Scircumference 
with the value 
* 2) end 1OuLpuL Tie. result 
x 
*/ 
Scircumference = 12.775; 


echo SCcircumterence: 
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Integers 

An integer is a whole number of the set z = {..., -2, 
-1, 0, 1, 2, ..}. As the maximum and minimum value is 
platform independent, we can access this value via the 
constant pHp int max. If PHP encounters a number larger 
than exp Int max, the number will be converted to a float. 
See Listing 4. 


Floats 

The maximum size of a floating point number, like Inte- 
gers, is platform dependent. However, all sorts of round- 
ing and logic errors can be introduced into code with floats 
as they behave differently from integers so particular care 
should be used. For instance, 1/3 is equal to 0.33333 with 
3 recurring to infinity, but as we have limited space it is im- 
possible to represent this fully. If accuracy is critical, vari- 
ous libraries are available to improve float functionality. 
See Listing 5. 


Strings 
A PHP string can contain up to 2Gb of characters. A string is 
limited to 256 ASCII characters, and does not internally store 
strings in Unicode format unlike some other languages. 

A string can be surrounded either by single or dou- 
ble quotes. If surrounded by double quotes, PHP will 


endeavor to evaluate any variables contained within. A 
single quoted string is called a string literal as the string 
is interpreted literally rather than expanding any vari- 
ables contained within it. Like the Vi versus Emacs dis- 
cussion, the use of single or double quotes is very much 
a question of what you want to achieve. While single 
quotes may be considered quicker than double quotes, 
other coding factors have a greater impact on speed. 
See Listing 6. 


Arrays 

An array is a list with a key and value pair. For instance, 
we can list the major BSD distributions as an array vari- 
able, rather than multiple separate variables. We can then 
perform operations on the list by looping through the key 
/value pairs. 

Arrays are useful where we have to keep records in 
sync. For instance if the records from a database table 
were dumped into an array it would be easy to manage 
using the record ID as key. If separate variables were 
used, it would be difficult to manage and the potential for 
errors would be great. Arrays do not need to have sequen- 
tial keys, indeed PHP supports the mixing of numeric and 
string values as keys within arrays. You can even define 
another array as the value of an array 





Listing 3. example3.php 


<?php 


eames ar. 


* Booleans 


+ ie a TEN lias Ss = eee iT ae eel ae an de Ss ha (on) ae 
x Detine DEBUG as a boolean, and print our 


* Change TRUE to FALSE to change the output message. 


define (“DEBUG”, TRUE); 
if (DEBUG) { 

echo ‘We are in Debug mode’; 
foeiee rt 


echo ‘We are not in Debug mode’; 


Listing 4. example4.php 


<2 io 
ex 
x example4.php 





Ss 2 


Ineecieiss 
asi] ea oe Near a ee Mie RN yea eee ys ay7o7 Lond a ~r) Sara a 
Cieck Ene lax TMUiP Meee r i 2e way cabclive soley Old 


Oia E Oink 


For a 32 bit system this will be 2147483647. 


echo PHP INT MAX; 


Listing 5. example5.php 
<7 


eC aletlerc mn i ias ve Oe l>s UNG ete mmMome male eUiacine 
hei reyes es x6) / 
Loria 22 > 

See Till |e a fy ee tO a) | Oron Rial a) yiionoyl im) 4 

Ae SSO UNG sire lean Seeks Syl lle, 


Sle eee 
echo Spi; 
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The first array example is the traditional PHP method for 
defining arrays, the second version onwards is available 
in > PHP 5.4. See Listing 7. 


Operators 

Operators are used to compare values (Comparison / Logi- 
cal) or change values (Arithmetic / Assignment / Increment 
/ Decrement / String). Care has to be taken with operator 
precedence, as certain operators will fire first. For example, 
the multiplication operator * takes precedence over the ad- 
dition operator + unless the addition portion of the equation 
is wrapped in brackets: see Listing 8. See Table 1 for the 
full list of of the most common operators. 





Functions 

Functions are small blocks of code that can act as effec- 
tively as a “black box” to the code that is calling it. As func- 
tions can be called repeatedly from anywhere within code 
— and if written properly — will provide a consistent result. 
Functions can act independently of the code that is calling 
them, or can return a result that can be manipulated by the 
main body of the program. An important point to realize is 
that variables defined inside a function are generally out of 
scope of the main body — that is to say $a in the main body 
of a program cannot be accessed by the function unless 
it is either passed as a parameter or accessed via some 
other method (PHP has a rich library of internal functions, if 





Listing 6. example6.php 


<?php 


/* 
* example6o.php 
Soil ines 
* Demonstration of the PHP string type. 
* Note that. the last lhine<1s functionally adentiacal to 
the previous 
* line and we are separating each line with a HTML <br />. 


* 


ey 


define (“BR ‘<br />”}\+? 
Spd = 22 5° 4; 

6cho “Whe value of PI as: Spi’ 2 BR; 
eclies “Whe~ value Om Pils: 99 Sp bee ek. 


echo The value or Pi ts: Spi” = BR; 


Listing 7. example7.php 
<?php 


Te 
* example?/.php 

* Arrays 

* All of these examples are functionally equivalent 


* 


a, 


dering BR *<r =) >” ji: 
// Define the array then print it out using the function 
oe en ee) 


// Use BR to separate each line 





parray 1 = array ( 
“0” => “FreeBSD”, 
“1” => “OpenBSD”, 
= Nereen 
); 


PEimte (Serra ik, 


echo BR; 


parray 2 = | 
“0” => “FreeBSD”, 
“1” => “OpenBSD”, 
“2” => “NetBSD”, 
|; 


iit (oedcica yah, 


echo BR; 


// Arrays can use mixed key values - they do not have to start at 0 


veigtey eos (P= Ecce oD 
rottay o| Enis is keysG ))— “OpenkoD”, 
reattayes |) je=— NeuBoD ; 


De ie (ates )p, 


echo BR; 


// Let PHP assign the key values 


patray 4[|| = “FrecBsD’; 
earray 4[] = “OpenBSD”; 
sarray 4[] = “NetBSD”; 


jonediate 1a l(Sichiiechy 4) 


echo BR; 
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you do not recognize a function call in the later CMS sam- 
ple code the script will be using a built in PHP function. The 
same apples to the javascript sample). See Listing 9. 


Control structures 

Control structures, along with Comparison / Logical op- 
erators provide the logic for our program. Example 3 is a 
good example of the if/else control structure. 

These are only a very small subset and the most com- 
mon of the extensive features available with PHP. To see 
the full list, please visit the PHP language guide at hitp:/ 
www. php.net/manual/en/angref.php. 


Table 1. PHP Operators 


=> Clan} el(s Name RCSIULLE 


4+ 
mw 


a+$b 
a-Sb 
a*Sb 
a/ $b 
a % Sb 


ir | in 
w wy 
+ II 
II Ww 
oa] 


a= ‘Hello’ 


a ‘world’ 


iH 


9a == $b 
Sa =S==— Sb 
Sa!=$b 


a<>Sb 
Sa !== $b 
a< $b 
a>S$b 
a<=S$b 
a<=S$b 
a and $b 
aor $b 


a xor Sb 


: 


a && Sb 


d 
r 
r 
t 
d 
a|| $b r 


4+ 


+ + 4S} — + 4S 4+ + 4S + + 
+ 4S 
Sr w 
mw 


a++ 


4+ 
. 
I 


Post-decrement 
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Sum of ands 


aoa cfs arithmetic 


TRUE if $a is equal to $b, and they are of the same type 


Multiplication Product of $a and Sb 
TRUE if $a is not equal to $b after type juggling 


TRUE if $a is not equal to $b after type juggling. 


: 


TRUE if Sa is not TRUE 


Part 2. CMS Structure 

See Table 2 — CMS directory structure. Create the di- 
rectories and the 14 files as per the instructions for the 
example code under Part 1 — PHP fundamentals. Before 
we can start coding in earnest, we need to populate our 
MySQL database. 

Create the following files, and create the database, ta- 
ble and our first page stored in the database: see Listings 
10-12. Note that the |lpsum Lorem test should be on one 
line with no carriage returns or line feeds. Your editor may 
wrap this very long line. Create the the database, table 
and page as follows in Listing 13. 


Operator 


TRUE if $a is equal to $b after type juggling Comparison 


TRUE if both $a and $b are TRUE Logical 
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Listing 8. example8.php 


<?php 


ys 
* examples.php 
* Demonstration of operator precedence 


* 


a7, 


Celine (2 BR “on > 


oop 3s 
Clee 5)e e 3y 


Sa 
Sbe— 


ine 


echo ‘Sa will evaluate to 16: * . Sa 


“So will evaluate to Ie: “2 sch BR; 


echo 


Listing 9. example9.php 
<2 plo 


/* 
* example9.php 
* Demonstration of a function call 


* 

a 
// As BR is a constant, this is available to our function directly 
sone ae? 


define (“BR”, 


// Spi is not available to our function, we will need to 
access it by 


// Otaer methods 
Sl eye 


Selle, “Cae biiniccinsaee: Wakely ch Clr eiilsiwieia S20 joven es ewiellN| 3) 7 


lela, Gseewinesiesiars Welle. Clbeisicsie IY. > joreibiane verlcer, (10) yer) 


EDUONCNE ONel jovettiae (Caio Siclleniie cieia ) | 


// print circl() will display $pi * $diameter 
// Define $pi as a global variable 


gi¢bal “Spi; 


// As BR is a global constant we can access it directly 


// Return our result to the main body of the program 





return Spi * Sdiameter . BR; 


UMC EL OM upiite me IeO7 (Sola Mowe t ae.) 1)) 


// primencives (); will vdisplay.>pi - diameter 

// As BR is a global constant and Spi has been passed to our 
// function we can access them directly. 

// Return our result to the main body of the program 


return Spi * Sdiameter . BR; 


} 
Listing 10. createdb.sq/ 


create database freebsdcms; 
grant usage on *.* to bsduser@localhost identified by 
‘cmsdbpassword’ ; 


grant all privileges on freebsdcms.* to bsduser@localhost; 


Listing 11. createpagetbl.sql 


CREATE TABLE if not exists pages ( 
id INT NOT NULL AUTO INCREMENT, 
PRIMARY KEY (id), 
title VARCHAR(50) NOT NULL, 
hl VARCHAR(50), 
body TEXT 


We 


Listing 12. createpage.sql 


USE freebsdcms; 
INSERT INTO pages 
VALUES ( 


\l 
y 


‘My first page’, 

‘Page header’, 

‘Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris 
interdum auctor tellus sed dignissim. Phasellus non orci massa, 
nec feugiat sem. Vestibulum molestie interdum 
bibendum. Nunc guis elit nulla, sit amet rutrum lorem. 

Quisque 
odio est, Sagittis nec accumsan ut, placerat sit 
amet lectus. Curabitur aliquam dignissim felis, a malesuada leo 
fringilla at. Sed ornare aliquet lacus, quis 
imperdiet augue mattis eu. Nulla porta odio ut erat 

COMMS S elie he 
molestie justo suscipit. Aenean convallis 
pellentesque nisl, vitae posuere mauris facilisis vitae. 

Morbi in 
tellus nisl, vel facilisis diam.’ 


he 
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Part 3. The Code 
The following PHP files contain the code for out website. 
Create each file as per Table 2. See Listing 14. 
global.css holds the style information for our site. Ex- 
periment with the font sizes, line spacing etc. to style the 
site to your liking. If you use Firefox, install the Firebug 
plugin to dynamically change the values, but if you want to 
make them pernanet you will need to edit this file. Also try 


F 5 ptr ape 
-+ ¢ ay, Meh Lk a 


4) PAGE HEADER 


Lone rh Oe Pe CO OO CR Mae Ie ee OR A Ce. PE ce) OC) ee, ee a WE ee ET) 
Berea. Mare Gal £02 fk, GE beret PUP afer. (Ru Ss i, ee A , ee ie, Ce ee Cre Ie, A Pi es 
Priep o2. ad Greed Aue! lieSurl, Guee rp degen Pa de. Pl pee cede ul eet cereale oe ee fe deep. Re Corel Geer fel, wld Godoere 
Buu Cee ie. Met im tees ee, ed Le ce 


Figure 3. Our first page — index.php 


renaming global.css and refreshing your browservs cache 
to see the effect of the styling on the site. See Listing 19. 

The include files build our basic HTML header and foot- 
ers, add the CSS add the CSS via global.css and load 
the Javascript. See Listing 20-22. The javascript files 








Figure 4, The page validates 





Listing 13. Creating the database, table and pages in MySQL 


#dev mysql -u root password ‘cms-password’ < createdb.sql 


#dev mysql -u root password ‘cms-password’ < createpage.sql 





#dev mysql -u root password ‘cms-password’ < createpagetbl.sql 








Table 2. CMS directory structure 


CMS Directory structure 
All directories are under /usr/local/www/apache22/data 


Directory / file Purpose 


examples Example PHP code 


includes 


index.php 


Start page for our CMS 


Javascript support for our website 


Contains the SQL loader scripts for our website. 


javascript 


sql 


stylesheets 
templates 
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PHP includes for CMS. Each file contains specific functionality as named 


examplel.php 
example2.php 
example3.php 
example4.php 
example5.php 
example6.php 
example7.php 
example8.php 
example9.php 


cms.inc 
core.inc 
html.inc 
mysql.inc 


index.php 


postload.js 
preload.js 
createdb.sql 


createpage.sq| 
createpagetbl.sql 


Holds the CSS stylesheets for the website global.css 


Holds the templates for the website 


header.inc 
footer.inc 
template.inc 
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Listing 14. index.php 
<?php 
/* 

ACS x sOmn> 


* Index page for FreeBSD CMS 


* 
a 
// Get required files 
// Our global settings - Note need full path 
require once ‘includes/cms.inc’; 
// Core functions 


Bequ ras Once wtih DES Cone me | 


(Poti fume t ets 
Gequrre Once INCLUDES. ume ame 7 


// Mycol, Funcerons 
require once —INChUDESs “mysqiane 7 


// Turn full debug functionality on if enabled 


if (DEBUG) { 


// Turn on full PHP error reporting 


SLrOr eeporring (i Alin); 


telsef{ 


// Hide all error messages 


SEGoOr er porting (Or, 


// Build page - use first record in database 
Spage[‘id’] = 1; 

buildpage (Spage) ; 

Listing 15. cms.inc 

<?php 

/* 


* 


ems Sane 


* Contains Cerauleyselteimgs for our CMs 


* NOTE: {@ denotes a line wrapped - all code should be 


on one line 


* 


A 
// Set our timezone 
date default timezone set (‘Europe/London’ ); 
// Copyright details 
define (“LICENCE”, ‘licence.txt’); 
define (“COPYRIGHT”, ‘Copyright &copy; 2013 Rob Somerville 
{| me@merville.co.uk’); 
define (“COPYYEAR”, date(‘Y’)); 


define (“COPYAUTH”, ‘Rob Somerville’); 
define (“COPYEMAIL”, ‘me@merville.co.uk’); 


i ees ion 


define (“VERSION”, ‘Version 1.0 not for production use’); 


// Mode - If DEBUG is set to true, show errors and debug 


PLES, 
define (“DEBUG”, TRUE); 
// Where to find our files 
define (“TEMPLATES”, ‘templates/’); 
define (“INCLUDES”, ‘includes/’); 


define (“SQL”, ‘sql/’); 


// HTML tags that are orphaned and not defined in out 
template files 


define (“BODY”, ‘<body>’); 
detine (“HEAD”, “</head>’ ); 


// MySQL details 


define (“DBSERVER”, ‘localhost’ ); 

define (“DBUSER”, ‘bsduser’); 

define (“DBPASSWORD”, ‘cmsdbpassword’ ); 
define (“CMSDB”, ‘freebsdcms’ ); 
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Listing 16. core.inc 
<7 pho 
/* 


* core.inc 


TUCO thcueOre. KUNCEToOMs, Pom "One TMs 
* 
zi), 
function buildpage(Spage) { 
// Builds a standard page 


Sid = Spage[‘id’]; 


// Build the SQL and get the result 


Ssql = “SELECT * FROM pages WHERE id='Sid’ LIMIT 1”; 


Sresult = mysql select ($sql); 


// Outout oum page neader 


outfile (TEMPLATES ‘header.inc’); 


/7/ Creace our body 


Smarkup = ‘'; 

Smarkup .= wraptag(‘title’, Sresult[4]); 
Smarkup .= HEAD; 

Smarkup .= BODY; 


// If we are in debug mode, show an alert 


if (DEBUG) { 

Sdebug = ‘é&para; '; 
jelse{ 

Sdebug = ‘'; 


// Add to markup 


Smarkup .= wraptag(‘hl’,Sdebug . Sresult[3]); 
Ssmarkup .= wraptag(*‘p’,Sresult([5]); 
Smarkup .= divclass(ahref (COPYRIGHT, LICENCE, 


Teor yGaeiae, amcle 4h 


licence details’),’licence’ ); 


// Output all our markup 


echo Smarkup; 


// Output our HTML page footer 


outfile (TEMPLATES SPOOECE Ane )r: 


function outfile(Sfile) { 


// Outputs template file to browser e.g header, 
footer, license etc. 


Sfh = fopen(Sfile, ‘r’); 
while (!feof($fh)) { 
echo fgets ($fh); 


PChLose(s fi) ¢ 


Listing 17a. html.inc 
<?php 


es 
* 

= Teme ene 

= Contains ore Him: tunciwions= For our MCMs 


* 


t 


function wraptag(Stag, Stext) { 


// Wraps Stext with compliant tags 
// wraptag(‘p’,sometext) 

// <p>sometext</p> 

Stext Ee Sitaq & 


rorurn “<" Stag = 


huNneE Lon divelacse (Sdivcontent, sclass, otc — — 4) | 


// Generates a div tag Stext with compliant tags 


i rcinvcilacs(UcOnrent class” ) 


Ney 
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Listing 17b. html.inc 


pi eC lass= Class comtenu<, ci 
jy Pnelessii Gonrent’. solace, aici } 


diy ela ss— Mkeonce” kO= ale Common) Cle 


ioc ae ue 


Sie = d=! Sic ee 
} 
rebum <div cllass—"* =. Scllass Vi Sid: 2. SZ 
Sdivcontent oy cay a 


fFUNeCELON anrer (Stext, suri, Stitile =)” )) 4 


// Generates an href tag Stext with compliant tags 
jy) vanrem(Clrek Here’, treebed,org) 

// <a href="http://freebsd.org” title="Click 
here”>Click here</a> 

// ahref (‘Click here’,freebsd.org,’Link title’) 

// <a href="http://freebsd.org” title="Link 


Pages = 6 eluate a 


ie Ss cielles —— 
Stutle.— Strext- 


Salrer — “<2 frer— "2. Suri tke Stitile 


Nes t 


SEeCKh = <7 a 


Rotini s camer. 


Listing 18. mysq]l.inc 
<7 


re 
* 
2 eC een ean 


ICOniGeinis ly oOlle Lumen KOMS Mero sou CMS 


* 


a, 
HUMe ELOmMe thy sc so hoc iat cet 


Sdob = new mysqli(DBSERVER, DBUSER, DBPASSWORD, CMSDB) ; 





ih(oobe ~commcer errno... |) 
die(‘Unable to connect to database |[ ‘ 


Silo 2Acloin giae.e iSicidend 4 | 1) 


if(!Sresult = S$db->query ($sql) ) { 
Tf (DEBUG) 
die(‘There was an error running the query [‘ 
edb= error. 
ee 
ele 


ore): 


// Pass our results to an array to be returned 


Sr = array(); 


Lj Nonor Lows —returneo 


el 
Sx[] = $db->affected rows; 


9result->num_ rows; 
// No of rows affected 
e.g. J 

update /delete 


White (2 fOw =) oresulL—- PoeCci assoc |) 4 


oc | = srow| 1d") 4 


pe Lise row |) nik |; 
Sip = Low) title” |e 
sri] = srow| ‘body’ |; 


// Eree tine. result 


Srestle--treei)-; 


return Sir? 
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Listing 19. global.css 


/* global.css - the site global stylesheet */ 


ile 
background-color: teal; 
float: left; 
color: white; 
Baccano 2 lox, 


text-transform: uppercase; 


a 
float: Nett; 

} 

body { 
line-height: 160%; 
text oaliom: . jst ict y 
float: lett; 

} 

ince raul 
background: none repeat scroll 0 O #F9F8F2; 
border: px solid; 
Colon steal, 
fome—remmelyss Verdana: 
Maou = Om: 
Paceding.. «Z0jos<, 

} 

.jstime, .licence { 


background: none repeat scroll 0 O #EDEAC6; 
border: lpx solid #DADADA; 

color: slategrey; 

iOa s arenoiEs 

font-family: Verdana; 

font-size: x—small; 

Mat Cin-SOr EC: Spx; 

MacgiIn-rignt:  h0ipx: 

Margin=uop:, 0px, 

paddange op l0ax: 


Listing 20. header.inc 


J CCIy PEaitminPURi es 7 Wee, Dib iis piece: 4) 
ENG Viti.) / Wiese oso Ih) xhtml bib) <ncmltstmetete aid = 
<html xmlns="http://www.w3.org/1999/xhtml” xml:lang="en”> 
<head> 
<meta http-equiv="Content-type” content="text/html; 
Charser— aso- ge59-l" 7 7) > 
<link rel="stylesheet” type="text/css” 
href="/stylesheets/global.css” /> 


<script Sre—"/javascript/preload. ss 4) 


type="text/javascript”></script> 


Listing 21. footer.inc 


<script src="/javascript/postload.js” type="text/ 
Favecckipt ——/ common <body < heml> 


Listing 22. template.inc 


This can be empty, but needs to be created. 


<!-- Template file --> 


Listing 23. preload.js 
/* 
preload.js 


Provides Javascript support 


c 
// Call the function displaydate() 


displaydate () 


function displaydate (){ 
// Displays the date and time in AM/PM format. 


var currentTime = new Date() 

var hours = currentTime.getHours () 

var minutes = currentTime.getMinutes () 
var month = currentTime.getMonth() + 1 
var day = currentTime.getDate () 


var year = currentTime.getFullYear () 


if (minutes < 10) { 


minutes = “0” + minutes 


NW o 
’ 


var ampm 


ii CMOUneS se-= lies 


ampm = “PM” 
(a Sear 
ampm = “AM” 


document write ( <diy cllass—\"jeuime, =" day) ~/" = 
Momma tae 


Vea ew eC UIGee any ee IMIS erie eIomi me c/s) 
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Listing 24. postload.js 
/* 
postload js 


Just an empty file with comments 


ae 














Useful links 
W3C Validator (by file upload) — http://validator.w3.org 
PHP documentation — http:/www.php.net/manual/en 
W3 Schools — http:/www.w3schools.com 











are split into 2. Preload.js provides the date and time on 
each page, postload.js is just an empty file which provides 
hooks we will use later on in the series. See Listing 23-24. 


Part 4. Our Simple CMS 

Once you have entered the code as per table 2, point 
your browser at http://vourserveripaddress/index.php. 
You should see a page similar to Figure 3. Turn debug off 
and on in cms.inc, and the paragraph mark should disap- 
pear. If you copy the HTML source from the page (In you 
browser view source, select all, copy and paste into the 
W3C validator) the page should validate. 


So what is our code doing? 

The unformatted text is stored as plain text in our data- 
base table. Index.php forms the first page of our website, 
and loads our settings and functions from the include files. 
The first stage is to load our header from a plain text file, 
which is the HTML at the start of our page. The header file 
in turn loads the CSS and javascript, and returns control 
to index.php. We then query the database, wrap the text 
in the relevant HTML tags and output to our browser. We 
then close the HTML with our footer HTML. In the next 
part of our series we will develop the CMS further, pass- 
ing parameters via our browser to load different pages, 
We will also start using our template file so that we can 
design our site the way we want it with separate blocks 
and regions. 
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In the fourth part of our series on programming, we will 
continue to develop our CMS. Here we will examine how a 
modern CMS dynamically generates and controls content 
and implement a similar model in our PHP code. 


What you will learn... 
¢ How to configure a development environment and write HTML, 
CSS, PHP, and SQL code 


es were literally handcrafted masterpieces of content. 

Before applications such as Dreamweaver arrived that 
allowed content providers to design attractive pages with 
the ease of a document produced in a word processor, it 
was a matter of writing copious amounts of HTML for each 
page, checking that the links and the HTML were correct, 
and repeating for each page. This model was highly inef- 
ficient, as not only was a lot of the HTML repeated across 
pages, the chances of errors coming in and either caus- 
ing the page to render incorrectly or pointing to the wrong 
address became greater as the site grew. Managing a 
website with 100 pages Is possible; a website with 10,000 
pages a nightmare. 

The complex sites we see today on the Internet would 
be impossible without the Content Management System. 
Yet even now, large innovative sites are moving away 
from the CMS model toward frameworks that consider the 
locally provided content to be only a part of the website 
with 3 party content supplying a significant proportion of 
the content. 

While the technology meets the ethos of the web in 
that data can be shared freely, it poses the web designer 
and brand manager with a huge challenge — how can 
we take disparate pieces of content and serve these in 
a “wrapper” that to our website visitors appears as if it 
seamlessly represents our brand values? How can we 
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What you should know... 


¢ BSD and general PC administration skills 


divorce the business process from the presentation? Is 
it possible for a website to develop a unique “personal- 
ity” while at the same time remaining fresh, dynamic and 
easily changeable? 

These hurdles are being overcome with the use of CSS 
(Cascading Style Sheets) and templating technologies. 
While the CSS manages the color, fonts, size, etc. of the 
content, templates allow us to adjust the order and vis- 
ibility of the content. For example, we want to generate 
widely different content (both from a stylized and literal 














Page ID: Content type: Rendering: style: 
- Reoord no 4 - Page ' Field order Colour 
- News - Visible / hidden - Size 
* FAQ - Position 
DB | 
Hi 
Page 1 
¥ Output 
http://mysite/page/1 
Figure 1. Page generation process 
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content perspective) depending on website section, page 
number and content type. See Figure 1 — Page genera- 
tion process. 


MySQL Interface 

As it is important that we can quickly test our CMS, for 
those that would prefer the “Cut, Paste and Click” ap- 
proach rather than managing long SQL statements via 
the command line, you can use a lightweight web-based 
database manager. The lightest of these (a single PHP 
page) is Adminer. An alternative is SQL buddy, and either 
of these can be quickly installed if desired by download- 
ing the archive and extracting into a folder under the /usr/ 
home/dev/data. The web-based interface can then be ac- 
cessed from: http://myserver/dirname. See Table 1 — Use- 
ful links. 


Adding New Content Types 

At the moment, we only have one content type — a page. 
This is stored in the pages table and holds the following 
content as shown in Table 1. 


Table 1. Page content from MySQL pages table 


nC 


This results in the following output as seen in Figure 2. 
Now let us create a second page in our database: 





Method 1 - Via CLI 


S mysql -uroot -p’cms-password’; 


mysql> use freebsdcms; 


mysql> INSERT INTO ‘pages’ (‘title*’, “hl°, ‘“body~) 


-> VALUES ‘HI’, 2"); 


(‘My second page’, 


4] PAGE HEADER 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum auctor tellus sed dignissim. Phasellus non orci massa, nec feugiat sem. Vestibulum molestie interdum bibendum. 


Method 2 - Via saved SQL statement 
If you prefer, create a SQL file createpage2.sq/ in the SQL 
directory with the following content: 


USE freebsdcms; 
INSERT INTO ‘pages (‘title’, ‘hl’, 


VALUES 


body) 


(‘My second page’, ‘Hl’, ‘2'); 


Then execute this at the command line: 

S$ mysgl -uroot -p’cms-password’ < createpage2.sql 

Method 3 - Via Adminer / SQL Buddy 

Alternatively use the SQL command function in Adminer 


to execute the following SQL statement: 


INSERT INTO “pages- 
VALUES 


(*title’, ‘hl*, ‘“body’) 


(‘My second page’, ‘Hl’, ‘2'); 

Houston, We Have a Problem 

We now have two pages in our database, but index.php 
still contains the following code: 


// Build page - use first record in database 
Spage[‘id’] = 1; 
buildpage (Spage) ; 


This hard-wires index.php to only serve a page with an 
ID of 1. Depending on the URL passed to the webserver, 
we want to serve that type of content. For example http:/ 
mysite/pages/1 will serve a page with an ID of 1, where- 
as http://mysite/faqs/1 will serve an FAQ with an ID of 1, 
etc. Visiting http://mysite will return the home page (Page 
1). This leads us to the next problem — where do we 
store the content types? We could include this in a sep- 
arate MySQL table, but this would require an addition- 
al SQL query to be executed every time a page is load- 
ed. As content types will not be changed very often, we 
can create another include file that defines our content 


Nune quis elit nulla, sit arnet rutrum lorem. Quisque odjo est, sagittis nec accumsan ut, placerat sit amet lectus. Curabitur aliquam dignissim felis, a malesuada leo fringilla at. Sed ornare 


aliquet lacus, quis impérdiet augue mattis eu. Nulla porta odio ut erat consectetur at molestie justo suscipit. Aenean convallis pellentesque nisl, vitae posuere mauris facilisis vitae. Morbi 


In tellus nisl, vel facilisis diam. 


Figure 2. Our first page 
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Listing 1. content.inc 


<7 Ol 
/x 
* 
-VGONEeNis Ic 
* Defines content types for our CMS 
* 
ey 
// Define the content type. This must match any tables 


defined in our 


 SCUls 

SCONECHUTUypColle=) page, 
PCOMECHENUy Pca) iy—— Lac’; 
PCONECMUMtyPCs |= Mews, 


// Map each content type to a table. Each content type 
must be matched 


// to a corresponding table 


PeCONECMIE tables | page |= pages | 
SCOMectiemucoles | tag |e——s tage, 
PCOMECht tables News (== news | 


Listing 2. pages_template.inc 
<2 Ole 
/ aa 

k 

Pibagese temperate Ine 


* Template for our page content type 


* For content type foo the corresponding template would be: 


[sO Ome molecive saline 


a To display a cie ld : 


Pe Vrence a(t heme | Mamegom Mel cowe cine simecle an)y 


* To hide a field omit it from here 


* To change the rendering order, just re-order the fields 


* NOTE: Any content generated by javascript will not be 
managed here 
z A closing ?> tag is mandatory 
x 
ae 
render (Stheme[‘title’]); 
render (Stheme[ ‘debug’ ]); 
render (Stheme[‘h1’]); 
render ($theme[ ‘timestamp’ ]); 


render (Stheme[ ‘body’ ]); 





render (Stheme[ ‘licence’ ]); 


22 


Listing 3. index.php replacement code 


// First we need to parse the URL that was passed to us 
to extract the 

// id and the content type. 

SURI = 9 oSBRVER|[ “REQUEST URI’ |; 

if (SURI == ‘/'){ 


// If this is a request to root (/) redirect to page 1 


Srequest = array(‘pages’,1); 


buildpage (Srequest) ; 


telsef{ 


// Parse the request, if it is valid get the content 


Erom Our aos 


Srequest = parse request (SURI); 


te enue egies tym 


buildpage (Srequest) ; 


telsef{ 


echo “Invalid request”; 


Listing 4. core.inc replacement code 


function buildpage(Srequest) { 


/ / Content catinielon. 


equines INeEWUDES COnbeh Ee. ine |, 


// Routes our incoming request to the right content 
type and pulls 
// the content from out DB. 


PEONEene type — .requesc| 0); 
Sid = Srequest[1]; 
Seenplatcceilc — IEMELAIES # CONES EyOc je | 


template.inc’; 


// Build the SQL and get the result 
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sql = “SELECT * PROM Scontent type WHERE id=’Sid’ LIMIT 1”; 
eLeoulue—aiysqiesclectiesqiy, 


// Check we have some content to display 


Te (oresmile | 0) == 01 


echo ‘No data’; 


return; 


// Check we have a template file 


Pile veaeme( tele lakes ile jae 


echo ‘No template’; 


rectiirn: 


} 


// Don't write any output to browser yet as we want 
ROMCOSEN Dp KOCe ss 

// our content using a theme. If enabled use our 
OPE AM IZet com 

// callback to remove white space etc. 

Gbestarn( Optimize callback \y; 

// Output our page header 

outfile (TEMPLATES ‘header.inc’); 

/7/ Creace our body 

echo wraptag(‘title’, Sresult[ ‘title’ ]); 
echo HEAD; 


echo BODY; 


// Generate a unique ID based on content type 


// Map the requested content type from our real table name 


SC > cleige y Secheell(ScCmesme eyce, Seemecme ieclolles) 5 


echo: *<oiy aid="’ 2 Sela) “>? = 


// If we are in debug mode, show an alert 


if (DEBUG) { 


Stheme[‘debug’] = div(‘&para;’, ‘’, ‘debug’); 


// Dump the title & id out to our theme template 
Stheme| ‘id’ | = Sresult (| “id? |; 
Stheme| “titile’ | = Sresult (| “title’ |; 
// As we don’t know how many fields we will have in 
CULV econo: 
// type after our id, iterate through each in turn and wrap 


Ve) aie hie ies keh yribien ee: eae 


Soffset = Gresult[1)| -— 1; 
Spos = 0; 


foreach (Sresult as Skey => $value) { 


if(Spos > Soffset) { 


Stheme [Skey] = div(Sresult [Skey], Skey.’-’.Sid, Skey); 


SeOstaa 


// Add our standard copyright notice 


Stheme[‘licence’] = div(ahref (COPYRIGHT, LICENCE, ‘Copyright and 


Jacence details’) ,;'" »” licence’ ) > 


// Include our template file 


EeqUjce snes ( eV lake puke); 


// Close our content type tag 


echoes </divy- 7 > 


// Output our HTML page footer 
outfile (TEMPLATES ‘EOCESH «LMG jes 


//* Plush tt all ous and display 


elo ciovel ululsian( 
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Listing 5. core.inc additional code 


PMc ELOnmoat cemGegues moll. 


// Returns the type of content and the ID 
// of the content requested. 

// parse request (/page/1) 

fy acer.) Pade. |) (ui 

// parse request (/rubbish/123456) 

// NULL 


// Content cetinvi1ons 


Hequincesouces NCU DE So Coneciine dlc, «, 


Sem Ninine 
Sa — ene 
Sa elacGe—e 


// Fetch the parameters from the URL 


Sarray = explode(‘/’,SURI); 


if Werdon’ teneco the first */* =-celete the first 


empiy 


// array item 


a= el tay smiit (array), 


// Check we have 2 parameters 


Sparamcount = count (Sarray) ; 


if (Sparamcount == 2) { 


// First test passed - We have 2 parameters 


Svalid ++; 


SCu 
Sad 


earray [0]; 


carrey |i). 


i enciera (Cm COMEC MeN byes) 


// If content type matches our list second test 


passed 


Svalid ++; 





// Map the requested content type to our real 


table name 


Seuecey (0 > SeCmesimte cloudless ||), 


Dee ee eres een deel) 


// If ID is a number, third test passed 


Svalid ++; 


if (S$valid == 3) { 


// Valid parameters passed, return content type 


and page ID 


Petueneoan hay: 


lelsef{ 


jj» lest tailed = retiura NOL 


return NULLS: 


TUM E LOM OOM Zeneca bach SOUt bet in 


// Replace all spaces and cruft between tags 


if (OPTIMIZE) { 


9b = preg replace(*~>\st<~'’, ‘><’, Sbuffer); 
sb = preg replace(‘*/\r\n| \rl\n/’,’', $b); 
Sb = preg replace(*!\st!’, * ‘, Sb); 


reLurn ob: 





www.bsdmag.org 


BSD :: 


MAGAZINE 





ADMIN 


Language: | English " MySOL » localhost » freebsdems » SOL command 


Adminer 3.6.4 SOL command 


SOL command Dump Logout 


IMSERT INTO ‘pages [ title, hi, body } 
WALUES ("Hy second page’, ‘H1", ‘2"); 


"ya 


fromateestircrriss = 
Create new table 
select pages 


Filé upload: | Chasse File | Mio file cheer {<= 266) 
Exenute Step on error — Show only errors 


From servers) j- History 


Figure 3. Using Adminer to execute SQL statement 








Listing 6. mysql.inc replacement code 
ele 
/* 
* 
FANS Clery alana 
Reon caiis My SOl tic hlOMs shores ouianCM > 
* 
a 
PIMeELOnemysqlyselectssqh) ay 


ito eb— coumcee cinoma 0) 
die(‘Unable to connect to database ['‘ 


Piolo — elo aersiere ieiercioue ||) 


if (!'Sresult = S$Sdb->query ($sql) ) { 
if (DEBUG) { 
die(‘There was an error running the query 
[ Ssdb=>erron. |") 
ese. 


ele 


// Pass our results to an array to be returned 


Sr = array(); 


Sa []) = Sieesullic—Saoml_ scorns: // No of rows returned 





Sdb = new mysqli(DBSERVER, DBUSER, DBPASSWORD, CMSDB) ; 


iP oNOe OF tcolumne= ine table 


sr] 
a 
update / delete 


SC be vel ancount, 


Sdb->affected rows; // No of rows affected e.g. 


// Append the results to our result count 


te (eres uiie= nuit Ows 9) — 0) 


pie etiayeMenGc (oto bcollt= te uetectitay (My SOlie 
ASSOC) \r; 


(i Sete enemres malt 


Sresult—>tree()- 


J / VClece the -conmeer ion 


Sdb->close(); 


Pete oae* 


} 
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types. We can then automatically use a custom template 
depending on the content type to post process our spe- 
cific content. 


Find the section marked <Directory 


“/usr/local/www/ 


apache22/data”> and add the following: 








First of all, we need to make some modifications to + 
Apache so that it serves our index.php page as default. # Redirect on error via our CMS 
Edit the line in /usr/local/etc/apache22 /httpd.conf to t 
match the following: 
ErrorDocument 401 /index.php 
DirectoryIndex index.php ErrorDocument 403 /index.php 
Listing 7. html.inc replacement code 
<?php pew Cine’ a Sid sClacsc.../- 
es SCdyGonuetwen << / Cay 7s 
k 
2 hms ine } 
E COntatnsmic Ore ime runicinue ticwero sOUtane MS 
x function ahrer(Stext, suri, Stitie =~") 4 


a 
function wraptag(Stag, Stext) { 


// Wraps Stext with compliant tags 





// wraptag(‘p’,sometext) 


// <p>sometext</p> 
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// ahref (‘Click here’, freebsd.org) 


(ie Sa neeh= eee, 





tag Stext with compliant tags 








here — Cliche nere</a— 


// anref(‘Click here’, freebsd.org,’Link title’) 








Freebsd.org” title="Click 








oe iret Heron | 





Freebsd.org” title="Link 








title”>Click here</a> 
Puen ie a CAGE Nn! ook bam wy Se cieaGnaa ns 8 ae 
} if ($title == ‘’) { 
FUNCTION diy (cdlvyecontent, eclacsc, oid =)  )) 4 Stitle = Suri; 
} 
// Generates a div tag Stext with compliant tags 
fj Oder MeOniente fc lass!) Saliter — = <aulirer— Sees ated 2 Stitle 
// <div Class="class”>content</div-> i ee Sexton ic 
jo) Oier( “COnueiic Class 4 20”) 
// <div id="id” class="class”>content</div> return Sahref; 
1 clara Gola) herssaneverds am Cane liad } 
(J ig d= Gre" Comeenr acini 
ji ear *GOnteii as! @ st) function render (Stield){ 
// <div>content</div> 
// Renders via template 
dey (Sch 
echo Sfield; 
bid = wird="4 Sauce een cee 
} } 
te “(oelass (i=, a4 
Sclass = ‘ class="' DOs cep s 
} 
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ErrorDocument 404 /index.php 
ErrorDocument 500 /index.php 


This will force all traffic to be passed to our index.php for 
processing. As root, delete our unwanted files then re- 
start Apache: 


S rm /home/dev/data/index.xhtml 
S rm /home/dev/data/index.html 


S apachectl restart 


When you visit http://mysite or http://mysite/, page 1 
should be displayed. Now for the modifications that will 
facilitate content type routing and theme control. Create 
a file in the includes directory called content.inc with the 
content from Listing 1. 

Create the following template file pages_template.inc in 
the templates directory shown in Listing 2. 

Remove the following section entirely from index.php: 


// Build page - use first record in database 


Spage[‘id’] = 1; 
buildpage (Spage) ; 


Replace with the one shown in Listing 3. Remove entire- 
ly the function call buildpage(Spage) from core.inc. Re- 
place with the code shown in Listing 4. Add the function 
calls from Listing 5 to the end of core.inc. 

Replace html.inc with Listing 7. Append the following to 
cms. inc: 


// Optimize output by removing white space between tags etc. 


define (“OPTIMIZE”, true); 
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Useful Links 
¢ SQL buddy - http:/sqlbuddy.com 
¢« Adminer - http://www.adminer.org 














Errata 
In the previous article of this series the following syntax was 
incorrect: 


#dev mysgl -u root password ‘cms-password’ < 
createdb.sgql 
#dev mysgl -u root password ‘cms-password’ < createpagetbl.sql 


#dev mysql -u root password ‘cms-password’ < createpage.sql 
It should have read: 


#dev mysgl -u root -p’cms-password’ < createdb.sql 
#dev mysgl -u root -p’cms-password’ < createpagetbl.sql 


#dev mysgl -u root -p’cms-password’ < createpage.sql 


Our apologies. 
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Testing and Adding New Content 
That is a lot of code we have added, but we now have a 
major jump in functionality. We can create any number of 
content types now by creating a new table (e.g. fag, news, 
etc.) The only essential fields we must define are ID and 
TITLE. After these two fields you may define as many or 
as few as you require. You will need to create a match- 
ing template file with the fields you want to display or else 
the content will be unable to render. Once you have add- 
ed new records to your content type (Adminer makes this 
quick and easy), the content can be accessed via your 
browser at: http://mysite/mycontenttype/mypageid. |f you 
attempt to access invalid content, you will be presented 
with a rudimentary error message. 

In the next article in the series, we will look at theming in 
detail and how we can lay out the site using a combination 
of templates and CSS. 


ROB SOMERVILLE 

Rob Somerville has been passionate about technology since his ear- 
ly teens. A keen advocate of open systems since the mid-eighties, he has 
worked in many corporate sectors including finance, automotive, air- 
lines, government and media in a variety of roles from technical support, 
system administrator, developer, systems integrator and IT manager. 
He has moved on from CP/M and nixie tubes but keeps a soldering iron 
handy just in case. 


BSD :: 


MAGAZINE 


ADMIN 


FreeBSD Programming 





Primer — Part 5 


In the fifth part of our series on programming, we will look 
at how to apply a style using Cascading Style Sheets (CSS). 





What you will learn... 
« How to configure a development environment and write HTML, 
CSS, PHP and SQL code 


What you should know... 


« BSD and general PC administration skills 





eveloping a popular and effective web presence 

does not just rest on the back office technology 

per se, the website also requires “character” and 
often in corporate environments, strict style guidelines ex- 
ist to ensure cohesive branding across media. Separating 
the design (in respect of “the look”) from the functional 
(what it “does”) remains a challenge for web developers. 
Quite often, the end result is a trade-off, especially when 
considering the number of web-enabled devices that are 
now available, the range of browser versions, font support 
and screen resolutions, etc. The bottom line is this — no 
matter how conscientious the web designer is, there are 
certain circumstances where the design of the website will 
not render as the designer expected. 

The industry standard response to this is twofold. First, 
end users are encouraged to embrace newer browsers, 
thereby eliminating the more obvious compatibility is- 
sues, and secondly, designers look to format the site in 
such a way in that the visual output “degrades grace- 


fully” when approached by less compatible browsers. 
This scenario is further highlighted where Microsoft in- 
troduced compatibility mode in Internet Explorer 8 (avail- 
able as an icon next to the refresh button) as it would not 
support the non-standard techniques used in previous 
versions of the browser. 


Léeekpe Daya MOPGL = PEPE © FES = hte @ ee 


Figure 1. Adding new content via Adminer 





Listing 1. Content added to content field via Adminer 


cole 


</tilie= 





In this article we will focus on the basic techniques used to integrate CSS with our CMS, and demonstrate how modern 
developers tools available for the browser can assist in design. You will need access to a PC with Mozilla 


Firefox installed to follow this tutorial. Some useful references can be found at: 


<li><a href="http://www.mozilla.org/en-US” title="Mozilla website”>Mozilla website</a></1li> 
<li><a href="https://addons.mozilla.org/en-US/firefox/addon/firebug” title="Firebug”>Firebug</a></li> 


<li><a href="http://www.w3schools.com/css/default.asp” title="W3 Schools”>W3 Schools</a></1li> 
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FreeBSD Programming Primer - Part 5 


In this article, we will focus on the basic techniques 
used to integrate CSS with our CMS, and demonstrate 
how modern developers tools available for the browser 
can assist in design. You will need access to a PC with 
Mozilla Firefox installed to follow this tutorial. 

Let's get started: 

First of all, | have created a new news item (in this case, 
with an ID of 3) via the Adminer interface. | added the fol- 
lowing content to the content field (the title and heading can 
be anything you want) — See (Listing 1) and (Figure 1). 

If you point your browser at http://vouripaddress/news/3 
you should see a web page similar to (Figure 2). 


Firebug 
When hand-crafting websites (i.e. when not using an util- 























Figure 2. Our new news item 
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ible for the browser can assist in design. You 


Figure 3. Firebug icon 
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Figure 4. Using Firebug to view HTML code & modify CSS 
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ity such as Dreamweaver), one of the biggest headaches 
for the designer is writing CSS. The cycle goes like this 
— write CSS, refresh and preview in browser, correct mis- 
takes, then repeat. With Firebug, we can view our CSS 
changes in real-time, adding selections and classes, etc. 
as required. The resulting amendments can be copied 
and pasted into our CSS file as required. 

Either visit the Mozilla Firebug website available from 
the link or install Firebug via the Tools / Addons menu 
item and restart your browser. You should see the Firebug 
icon at the top right hand side (Figure 3). Clicking on the 
Firebug icon should bring up the Firebug interface and 
change the color of the icon (Figure 4). 

If you click on the HTML, head or body tags in the left 
hand panel of Firebug, you will see the corresponding 
CSS as defined in our global.css file appear on the right. 
You can then disable or edit the values displayed as ap- 
propriate. Click on the HTML tag on the LHS and disable 
each CSS rule in turn by clicking next to it. To revert your 
changes, press F5. (Figure 5). 
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Figure 5. H/ML attributes disabled in Firebug 


Figure 6. jstime div highlighted 
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Click on the HTML tab. Expand the body tag by click- 
ing on the + sign, and click on <div id="jstime”>. The div 
will be highlighted and the relevant CSS displayed. The 
corresponding CSS can be edited in situ as desired. See 
(Figure 6). 

Firebug is not just an essential tool for modifying and 
testing CSS, you can also debug and step through Javas- 
cript, edit HTML on the fly, check how quickly the compo- 
nents of your web page download, etc. 

Click on the Script tab and reload the page by press- 
ing F5. The Javascript code from preload.js will be shown 
in the window. Set a breakpoint by clicking to the left of 
line 15 (Var CurrentTime ....) and reload the page again. 
You can then step through the javascript code by pressing 
F11. See (Figure 7). 





Listing 2. news_template.inc 


render (Stheme[ ‘heading’ ]); 
render (Stheme[‘title’]); 
render (Stheme[ ‘timestamp’ ]); 
render (Stheme[ ‘content’ ]); 
//cender (Stheme[ ‘licence’ ]); 


//render (Stheme[ ‘debug’ ]); 
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Figure 7. Debugging Javascript 
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Figure 8. CSS selectors, properties and values 
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CSS selectors, properties and values 

CSS syntax is very straightforward. Every HTML tag is 
referenced via a CSS selector (e.g. HTML — html, BODY 
— body etc.) and in turn, this selector has properties and 
values. Where matters get complicated is the cascading 
nature of CSS; for instance if the HTML is defined as hav- 
ing a font size of 12px (12 pixels), unless this is overrid- 
den somewhere, the body (and our footer areas) will have 
a font size of 12px. Good CSS is a balancing act between 
optimized selectors and overrides. Define your HTML or 
BODY too tightly and your theme will require lots of over- 
rides. Likewise, if you have too loose a definition for your 
HTML or BODY tags, there will be a lot of unnecessary 
code duplication. 

Cross browser compatibility also creates issues, devel- 
opers often use a CSS reset to level the playing field to 
build on with their CSS. 

As with all aspects of programming, there is never a de- 
finitive right answer. In some circumstances, speed will 
be more important than compatibility. In others, maximum 
compatibility will be more important and will require a lot 
more CSS. Complex designs will add to this payload. 


Styling our site 
We now have the following design requirements for our 
news page: 


¢ The debug status symbol should be disabled for this 
page 

¢ It should show the FreeBSD logo 

¢ The content should be on a light background cen- 
tered against a dark background 

¢ The timestamp should be in a small font and should 
be prefaced with “Posted at” 

¢ The heading should be in a large font and appear be- 
fore the title 

¢ List items should be discs 

¢ All hyperlinks should be highlighted light red and 
change color on hover 

¢ The content should leave a space on the RHS for 
some menu items to be added later 

¢ The time display should be in the footer as well as the 
license conditions 


First of all, download the FreeBSD logo from the Free- 
BSD site. This logo is a transparent PNG, which means 
whatever color background we display on the website 
will shine though the image. Download this into a new di- 
rectory called images under /dev/data. 

We need to make some modifications to our news tem- 
plate and javascript files. Edit news_template.inc to follow 
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Listing 3. header.inc 


<link rel="stylesheet” type="text/css” href=”/ 


stylesheets/reset.css” /> 


Listing 4. footer_template.inc 
<?php 
render (Stheme[ ‘licence’ ]); 


2 


Listing 5. cms.inc 


// Definition of our footer template 


celine LEME ie nOOreh rele lare. ile a)x, 


Listing 6. core.inc 


// Include our template 


Ee Cuero One e (hEMrIAaRhS 7.) OO ANE Rel Miedpaala ) 7; 


// OULU our HIME oorer 











A Ge Ca a! a Rei he 


by thet eros we wi feces on che beer chon wed to ee aS eh or CE, od Gene bee ede Cowelopere reds avaclabls for the bower ca ae des, oo 


ep come) oe ewe fi PES ths eee ly Fees ei Deel to fodkere en ee tl eee ed) peter ee a be fine © 
© Sebocih arebreatiee 
» eae Bepoos 
* Woes 
‘Cappwrcbk 205) Rob emer mee erie oo wl 
- ‘ = tie TLS | ae ed o ee 
es benchy ahi an Lees 2 ee 
Se : ; von | werden ote en 17e 
Sa re eel 
= career) ine eek uimy 
_ Pet ee ee eee ype te pa ee 
ches vb" pighotens = tml 
i. le esha a 
G4 i . = 
ee 
= 
8 ali Lilet Seed" 
Bae phi? = any 
edie Virie=" ji 1 bs Ts 
ue 


a iS ee Ta 
thes arcs ere will focus on Lhe beac bechmiqqoes ued bo £ ate CEE math er CMR, a a ee are eS cmilabie for the Doe oar a 


ber et i Gee ee Wl eed 
aa | Soca ath betena Gals be Bercd ai 


4 Bo? gee ems ee a eral 
a imi = Ses es 
- " . . = my. oe ee, ples to L ot an ee ek ae a ka Pe 
serra moe tens ee soe ah er oe ioe ss Sen ns cee ras ete thee 
- a oe “ mari, Fi Se 
en nn i ge ti‘(“‘i‘itist*s*éC* hem, mies, } =e, = ooo, Fee, te, 
eels PTS wee, ehereet> Ge ES 1 i ited tse eS Tarkie, Mica, Bipot alge. eae. th i. i a vk 
aed Pn teeters ere cee” Lee bee doon” pleas Lert = ne — 
Sad eS nie ieeteetocw Leder ims” Leas eeica Selene en tei" | rs 
eed ete bee eet it™ devin sleet ibd vo eld fate qe ay 
a! Lr Le |b a Cd ate mang hy 
“ae vivaisat al ~ 
Bi cena 


Figure 10. Site with reset.css applied 
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the code in (Listing 2). This will change the order of the 
displayed items and disable the debug symbol. 

Copy all the content from preload.js into postload.js, 
and delete everything apart from the opening comment 
from preload.js. Change the file title in the comments 
section of postload.js to postload.js. This will load the 
javascript clock at the end of the body section. See 
(Figure 9). 

We now need to decide how global our CSS should 
be. Do we want all the links on the site to be light red? 
Should all list items be discs? Should the logo be the 
same on every page? For the sake of consistency, we 
will do this but can override this later via the theme files 
(by adding new divs, classes and id’s) and adding fur- 
ther CSS. 

Let us start off with a blank canvas. Delete the contents 
of global.css and download reset.css from meyerweb. 
com into the styelsheets directory. Add the following line 
immediately before we load global.css (Listing 3). 

This will give us a page that looks like (Figure 10). 
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Figure 12. Front page — Note template needs amendment 


BSD 39 


MAGAZINE 


ADMIN 


Create the file footer_template.inc and add the following Create a new global.css with the following content (List- 
content (Listing 4). Add this to cms.inc (Listing 5). ing 7). This should result in the pages as displayed in (Fig- 
Add the footer template to core.inc and add these lines __ure 11) and (Figure 12). 
just before // output our HTML footer (Listing 6). 


Table 1. Global CSS 

















a:hover The: hover modifies the default a css to fire when the link is hovered over 
‘Htimestamp:before Content added before thetimestamp id 
#heading text-transform: capitalize forces the first letter of each heading word to uppercase 
ti Tiststyle:circle inside forces a disc to be used with indented listitems 
Listing 7. global.css margin-top: 3px; 
body { } 
backgnound—collon: furl rap, #theading { 
backorolnd=image: Uurl("/ images) loge fll Ia png” )-- backgreund-collor: #Bl34d3C; 
background-repeat: no-repeat; COlor: #FPRFPPE; 
border: lpx solid #000000; BOWn- Suze.) 25pm 
font-family: helvetica; HOMEaWwergiin: soolc: 
font-size: U4px; Margin -borroms — L0px: 
Met quan 20px. auto. Oy Macoin-Lep. —0Dx; 
pedding: (0p. 0px. 3 Sx; Daeg) liiox, 
wide 9 60px= timperirenis: BONES eMenic tec: Cap iiecilsh ze ¢ 
} } 
html { #content { 
background-color: ollivedrab; colors 127272. 
} FOnE=suzZes —20px; 
a { line-height: 30px; 
color: #FD5EA9; extol: wUStrmy: 
} } 
a:hover { #licence, .jstime { 
background-color: #FDA8D0; background: none repeat scroll 0 0 #FFFFFF; 
color: 4FREEFE; floats ert; 
} LONE sizes. kOpx: 
#news, #page { Meme Cue Ol 25 eleac. 
border: lpx solid #DADADA; padding-rrght = liipx,; 
Marin =POpr. LO px; padding-top. Spx; 
padding: (2 0px; } 
Wichelies | OOa. Rie 
} lvst-style: carcle anside; 
#timestamp:before { } 
CONWeIIEn ne POs teats |; 
} 
#timestamp { 
Colors 4AZaJA2; 
honE-size: 0Dx; 
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Useful links 

¢ Mozilla firefox — http:/www.mozilla.org/en-US 
Firebug - https://addons.mozilla.org/en-US/firefox/addon/ 
firebug 
W3 Schools CSS tutorial — http:/www.w3schools.com/css/ 
default.asp 
FreeBSD logo — http:/www.freebsd.org/logo/logo-full.png 
Eric Meyer's CSS reset — http://meyerweb.com/eric/tools/css/ 
reset/reset.css 











What have we accomplished here? 
Apart from moving the javascript clock and licence outside 
of the main content area (which required the addition of 
a template and a small modification to core.inc and cms. 
inc), most of the heavy lifting has been performed by re- 
set.css and global.css. Reset CSS sets the defaults for all 
major browsers etc, and this is reflected by the raw output 
on our non-news pages. We now have a choice, either 
embed our website standards in reset.css or depending 
on our database and template definitions, add some fur- 
ther CSS to global.css. With hindsight, choosing “body” for 
a field name in the pages table was not ideal, as it cannot 
be referenced in CSS without causing havoc. Renaming 
this to “content”, changing the name in pages template. 
inc and commenting out the render ($theme (‘licence’) ) 
will fix the pages content to match the news item. 

As for global.css, most of the selectors and values 
should be self-explanatory. The more subtle attributes are 
listed in (Box 1). 


In the next article 
We will continue with some more advanced CSS, and be- 
gin to build our menu system. 


ROB SOMERVILLE 
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In the sixth part of our series on programming, we will design a 
basic menu navigation system and style it with CSS. 


What you will learn... 
¢ How to configure a development environment and write HTML, 
CSS, PHP and SQL code 


displaying standard HTML pages which have been 
pulled from our database. We are now going to shift 
directions and start to look at the user interface of the CMS 
itself. Traditionally, menu links were hard coded into pages, 
which not only made long-term maintenance time-consum- 
ing but also error-prone. By leveraging the power of a da- 
tabase back end, we can easily extract the title and section 
of pages we want to display and if desired, include or ex- 
clude that content from the menu. For flexibility, we will also 
include the facility to add disparate links to other sites, etc. 
Many sites now use multi-level menus which are driven 
by a combination of SQL, Javascript / Jquery and CSS. 
Later on in the series, we will look at using Jquery to 
add this functionality, but for now we will concentrate on 
a block navigation menu that is displayed alongside the 
main content. 


S o far in this series, we have focused on adding and 


The SQL 

To demonstrate, let’s spin up a MySQL session and take 
a look at our content. At the shell prompt, login to MySQL 
and run some queries (Listing 1 — 2). 

By using the UNION keyword, we can combine the 
output of both SELECT statements into one result. This 
would be fine if we had a small site with not much content, 
but as the site grows, the menu would become unman- 
ageable in size. We could build the interface with a drop- 
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What you should know... 


« BSD and general PC administration skills 


down and filter by section, but we would just be postpon- 
ing the inevitable. An additional improvement would be to 
use a combination of a content type filter and a pager with 
the MySQL LIMIT keyword, restricting the display to a cer- 
tain number of items. This would help in the final design 





Listing 1. Logging in to MySQL 
#dev mysgl -u bsduser -pcmsdbpassword 


Listing 2. Selecting our content 
mysql> use freebsdcms; 
mysql> (SELECT ‘news’ AS contenttype, id, title FROM 
news) UNION (SELECT ‘pages’ AS 
contenttype, id, title FROM pages); 


+------------- +----4}----------------------- + 
| contenttype | id | title 

+------------- +----4----------------------- + 
| news | 1 | My first page | 

| news | 2 | My second page | 
| news | 2 || Artrele 5 = /Usino CSS, || 
| pages | 1 | My first page | 

| pages | 2 | My second page | 
4+------------- +----4----------------------- + 
5 rows in set (0.00 sec) 
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and theming of the site, as we will know exactly how much 
browser real estate would be occupied by the menu itself 
even if the content expanded rapidly. 

The remaining issues are how to add disparate links 
and whether we want to display the content in the menu 
at all. For example, we might have an error page that only 
is displayed when the content is not found. While it would 
be useful to store this in the database, displaying it in the 
menu would be rather pointless. The question is where to 





store this data? We could have a separate menu table, 
with the ID of each page and a numeric flag (0, 1) to rep- 
resent do not display in the navigation menu or include in 
the menu. We would then have to maintain 2 tables when 
content is added and removed. This could be easily ac- 
complished using MySQL triggers. Alternatively, we could 
store the page status in the relevant content tables (e.g. 
news, pages) with a flag (0,1,2) to represent “do not pub- 
lish”, “publish but do not show in menu’, and “publish and 





Listing 3. Creating FAQ’s table and adding status flag 


mysql> CREATE TABLE faqs LIKE news; 
mysql> ALTER TABLE fags ADD status INT DEFAULT 0 AFTER 


COniLent: 


Listing 4. Adding auto increment to the FAQ table 


mysql> Allen ABER tags CHANGE dei IN i 1} AUTO UINCREMENT; 


Listing 5. Adding data to the FAQ table 


mysql> INSERT INTO fags(id, title, heading, content, 
status, timestamp) VALUES(‘’, 
SE AO! 1d Ses: hAOn, 


‘Aenean volutpat, ligula vitae 


laoreet dapibus’,2,''); 


Listing 6. Amending the remaining tables 

mysql> ALTER TABLE pages ADD status INT DEFAULT 0 AFTER content; 
mysql> ALTER TABLE news ADD status INT DEFAULT 0 AFTER content; 
mysql> ALTER TABLE pages CHANGE id id INT(11) AUTO INCREMENT; 
mysql> ALTER TABLE news CHANGE id id INT(11) AUTO INCREMENT; 


Listing 7. Our 3 table content 


(SELECT 
FROM news) UNION 


mysql> ‘news’ AS contenttype, id, 


(SELECT 


Status, title 


‘pages’ AS 
UNION 


contenttype, id, 
(SELECT “fags” AS 


status, title FROM pages) 


contenttype, id, status, title FROM faqs); 


+------------- +----}+-------- $----------------------- + 
| contenttype | id | status | title 
+------------- +----}+-------- $----------------------- + 
news il 0 My first page 
news Z 0 My second page 
news 3 0 Article 5 = Using =CSs 
pages 1 0 My first page 
pages 2 0 My second page 
faqs a Z FAQ 1 
faqs 2 0 FAQ 2 
faqs 3 il FAQ 3 
faqs 4 Z FAQ 4 



































faqs 5 ZB FAQ 5 
faqs 6 2 FAQ 6 
feco i Z BeOe 7) 
faqs 8 A FAQ 8 
faqs o 2 FAQ 9 
feeleye 10 Z FAQ 10 
+------------- +----}-------- $----------------------- + 


15 rows in set (0.00 sec) 


Listing 8. Updating the news and pages status 


mysql> UPDATE news SET status = 1; 
mysql> UPDATE pages SET status = 2; 
(SEBEL 
FROM news) UNION 


mysql> ‘news’ AS contenttype, id, status, title 
(SELECT 
‘pages’ AS 


UNION (SELECT ‘fags’ AS 


contenttype, id, status, title FROM pages) 


CONneenttype, (1d, status, title FROM faqs) ; 

















+------------- +----}-------- $----------------------- + 
| contenttype | id | status | title 
+------------- +----}+-------- $----------------------- + 
news i 1 My first page 
news iz 1 My second page | 
news 3 iL Aine cows. NUS miGecos s| 
pages 1 Zi My first page 
pages Z Z My second page 
ee Oh i 2 FAQ 1 
faqs Z 0 FAQ 2 
faqs 3 1 FAQ 3 
faqs 4 2 FAO 4 
faqs 5 Z, FAQ 5 
faqs 6 2 FAQ 6 
fees 7 Z FAQ 7 
faqs 8 Z FAQ 8 
Lage 9 Z FAQ 9 
faqs 10 Z FAQ 10 
+------------- +----}+-------- $----------------------- - 
lS rows in seu (0.00 sec) 
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Figure 1. Bug in core.inc 


show in menu’. Both designs have their good and bad 
points from the implementation and data integrity view- 
point, but for the sake of simplicity, | will use the latter for 
our navigation menu. 

In the meantime, we have an FAQ definition in our file 
content.inc but we do not have any table data for it. We will 
now manually create the table and add 10 random FAQ en- 
tries (Listing 3-5). This will result in a new FAQ table with 
our status field. However, the ID field is not set to auto in- 
crement, so we need to change this (Listing 4). Now insert 
the data (10 entries) — replacing the title, heading and sta- 
tus (0, 1 or 2) as appropriate. We need to repeat the struc- 
tural amendments for our news and pages tables as well 
(Listing 6). Let's check what data we now have in the three 
tables (Listing 7). As we can see, the news and pages will 
not be published or displayed in the menu. Change this so 
the news items are not in the menu but published, but the 
pages are (Listing 8). Let us check in a browser if FAQ 
1, 2 and 3 are displayed. Visit http://yourserverip/faq/1 and 







k LATI2013 20:32PM 


Figure 2. CSS requires fix for FAQ content type 


you should get an error message “No template”. To rec- 
tify this, create a faqs template.inc file iN /usr/home/dev/ 
data/templates with the following content (Listing 9). 

Bug alert! If you visit http://yourserverip/faq/1 you 
will find the page is not rendering correctly (Figure 1). 
You will receive an error message: Notice: undefined 
index: heading in /usr/home/dev/data/templates/faqs _ 
template.inc on line 23. If you want to try and diagnose 
the problem, have a look at core.inc and skip the next 
code listing. The problem lies in the following code snip- 
pet. To fix it, change as follows (Listing 10-11). 

lf you visit http://yourserverip/faq/1, you will find the 
page is still not rendering correctly (Figure 2). The reason 
for this is that the the global CSS doesn’t know about our 
FAQ content type yet, so we need to modify global.css as 
follows (Listing 12). You may have to refresh or clear your 
browser cache to pick this up. This should result in the 





Listing 9. FAQ template 


<n 
es 
* 
| aags (eem@lawecsenc 


* Template for our fag content type 


* For content type foo the corresponding template would be: 


([hOO, temollci ean 


~ To display a meld: 


See nee te tiemo |e Wome mc mile becom Go uMc cae Mime ously Ee 


* To hide a field omit it from here 

* To change the rendering order, just re-order the fields 
* 

* NOTE: Any content generated by javascript will not 

be managed here 

. A closing ?> tag is mandatory 

x 

/ 
render (Stheme[ ‘heading’ ]); 


render (Stheme[ ‘content’ ]); 





oe 


Listing 10. Bad code! 


Le (SpOs > SOrrSeL) 4 


Stheme[Skey] = div(Sresult[Skey], Skey.’-'’.Sid, Skey); 


Listing 11. Good code 


if (Spos >= Soffset) { 


Stheme[Skey] = div(Sresult[Skey], Skey.’-’.Sid, Skey); 


Listing 12. CSS to include FAQ content type 


#news, #page, #faq { 


Listing 13. Prevent non-published content showing 
Ssql = “SELECT * FROM $content type WHERE id=’Sid’ AND 
Seatus = OVhIMET 
1 tee 








BSD 


MAGAZINE 


44 


TBO 01/2014 





FreeBSD Programming Primer - Part 6 


FreeBSD. 








Aenean volutpat, ligula vitae laoreet dapibus 
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Figure 3. FAQ working 


correctly rendered content in (Figure 3). However, if we 
visit http://yourserverip/faq/2 , we will see an FAQ page 
even though the status is 0. Modify core.inc as follows to 
fix this (Listing 13). This should now give a “No data” mes- 
sage. If you are still experiencing problems, ensure that 
the content.inc file is as follows (Listing 14). 


Building our menu 

How can we remember the filter value selected for the con- 
tent type? As HTTP is stateless, we could pass the param- 
eter to each page. This would get complex very quickly with 
multiple menus. A better solution would be to write a cookie 
to the visitors browser when the content type is filtered. To do 





Useful links 

¢ Jquery library: http://code.jquery.com/jquery-1.10.2.min.js 

¢ Jquery cookie: https://github.com/carhartl/jquery-cookie/ 
blob/master/jquery.cookie.js 











libraries. Download jquery-1.10.2.min.js and jquery.cookie.js 
from the Jquery website. Place these files in the Javascript 
folder, then modify our source code as follows (Listing 15- 
18). When you visit http://youripaddress/faq/1, you should 
see a page similar to Figure 4. Clicking on the FAQ, News or 
Page button will raise a Javascript dialogue box. 


In the next part 

We will tie the onclick event to writing a local cookie, and 
extracting the links for the MySQL table. We will also look 
at using the Jquery library to build a multi-part menu. 


ROB SOMERVILLE 

Rob Somerville has been passionate about technology since his ear- 
ly teens. A keen advocate of open systems since the mid-eighties, he has 
worked in many corporate sectors including finance, automotive, air- 
lines, government and media in a variety of roles from technical support, 
system administrator, developer, systems integrator and IT manager. 
He has moved on from CP/M and nixie tubes but keeps a soldering iron 





this we will use Javascript, and specifically a suite of Jquery — handy just incase. 
Listing 14. content.inc 
Sco mesine tecloles | ects | > joctejes- 
<?php SOOM Uenib mealies |) mace ae cles. 
/* Seonceme celoles || mane |S were: 


* 


SS COMECh enue 
* Defines content types for our CMS 


* 


7 


// Define the content type. This must match any tables 


defined in our 





// CMS 

~COnucmic sEyOcs| =" Page 
-¢ OMeetieg ey Occ =a, 
TeOMUCKIEN EYPesl) = ewe ; 


// Map each content type to a table. Each content type 
must be matched 


// to a corresponding table 





Listing 15. header.inc include Jquery support 


<< DOCIY EES hem! PUBmIC =) /WeC //DID SIMO soietery) EN 
SHEED.) WWW oeord, Thy <html 1/7 Dub, <himlilasterct dtd = 
<html xmlns="http://www.w3.org/1999/xhtml” xml:lang="en”> 
<head> 

<meta http-equiv="Content-type” content="text/html; 
Chateee= Wooo s sla 7) = 

<link rel="stylesheet” type="text/css” 
href="/stylesheets/reset.css” /> 

<link rel="stylesheet” type="text/css” 
href="/stylesheets/global.css” /> 

“SCmipt src= /javaseriply jquery—-l. 077 mings 
type="text/javascript”></script> 


<SCripl src=") javascript, jquery cookie. s” 





type="text/javascript”></script> 
<script src=”"/javascript/preload.js” type="text/javascript”> 


</ Serpe 
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Listing 16. core.inc 


PUM Ce OMe ENA me clelocieka = OUimibct ja 


// veplace all spaces between tags 


ee (OPT IMIEZ, 4 


pO = preg replace( ‘=> \st<~ , ‘><’, Sbutter); 
oO = preg replace (“/\eim|\e|\n/’, “, ob); 
Sb = preg teplace(™ ! stl’, Sb); 


return Sb; 
} else { 
// BUGFIX - Edition 6 


hekibn obU iim. 


Listing 17. index.php — add include menu.inc 


7) Menuie rune Lons 


Gequinesonce INCLUDES Mens ime; 


Listing 18. menu.inc 


<?php 
function menu(Stype) { 


cegquine Nenu S LOOM ee Gre: 


if ($type == ‘navigation’) { 
// Build select statement for each content type 
he eer 


// Omit the UNION keyword on the last item 


Sottse: = 1 
PCaueJOtles = COUNL > cOnibemu cables); 
Sisqi t= 7% 


\7 


Soption = ; 
endiscleld ((Sveloihesie ieclolles cvs SiclolnecmceyeS) | 
// Build the option for the content type 


Soption .= ‘<button onclick="window.alert(\’’. 


Scontenttype.’\’)”>’ .Scontenttype.’</button> énbsp;'; 


Soffset ++; 


Smenu = ‘/; 

SmMenl ee" di oleae — menu" Stype Bea ae 
Smenu .= ‘<h2>’ Stype in 

omen. <p> cnbep;</ p> - 

Smenu .= Soption; 

Smenu .= ‘</div>’; 


rerilenm omen: 


Listing 19. Menu CSS add to global.css 


.menu-navigation { 
border: lpx solid #DADADA; 
paddumnon. 0iox: 
Vivolelien Uo 
background-color: #E5E6AD; 





ine 
COlOm Geomako:: 


font-weight: 600; 
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Figure 4. FAQ with Javascript onclick buttons 
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Dont guess 
Don't believe aa N Oxi 
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™- aCros 


An ACROS Penetration Test is conducted exactly like a real attack by a skilled, 
motivated adversary — only without the damage. We will find the weakest links 
in your security and use all our knowledge, skills and capabilities to try to 
achieve exactly what your security measures and policies are there to prevent. 
If it sounds difficult, we're interested. 








Experience the ultimate test of your security. 
(After all, the only alternative is to wait for an actual attack.) 


ACROS Security — http://www.acrossecurity.com — security@acrossecurity.com 
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In the seventh part of our series on programming, we will continue 
with the menu navigation system and using Javascript. 


What you will learn... 
¢ How to configure a development environment and write HTML, 
CSS, PHP and SQL code 


represent the three content types that we have de- 


S o far, we have built navigation section buttons that 
fined in content.inc: pages, news and FAQ’s. When 
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First FAQ 


Aenean volutpat, ligula vitae laoreet dapibus 


navigation 
pages | [fags] | news | 
Copynght © 2013 Rob Somenme metimente cok I(hALSs 254A 


Beye ae bee 


Figure 1. FAQ with Javascript onclick buttons 
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What you should know... 


« BSD and general PC administration skills 


the button is pressed, a Javascript popup alerts the user 
as to what button was clicked via the onclick event (Figure 
1). We now need to add additional functionality — when the 
page is loaded, by default the page's links should be dis- 
played, the menu option (or filter) needs to be displayed to 
the user, and when the button is clicked, the menu content 
needs to be rebuilt (Figure 2). Later we will build a more so- 
phisticated menu using the Jquery library. 






Has user chosen 
a menu filter? 





Figure 2. Logic for the navigation menu 
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<!/DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http: //www.w3.org/TR/xhtml1/DTD/xhtmll-strict.dtd": 
<html xmlns="http: //www.w3.org/1999/xhtml" xml: Lang="en"> 

<head> 

<meta http-equiv="Content-type" content="text/html; charset='iso-8859-1'" /> 

<link rel="stylesheet" type="text/css" href="/stylesheets/reset.css" /> 

<link rel="stylesheet" type="text/css" href="/stylesheets/global.css" /> 

<script src="/javascript/jquery-1.10.2.min.js" type="text/javascript"></script> 

<script src="/javascript/jquery.cookie.js" type="text/javascript"></script> 

<script src="/javascript/preload.js" type="text/javascript"> 

</script> 

<title>My first page</title></head><body><div id="page">My first page<div id="debug">&para;</div><div id="hl 
interdum auctor tellus sed dignissim. Phasellus non orci massa, nec feugiat sem. Vestibulum molestie interdu 
bibendum. Nunc quis elit nulla, sit amet rutrum lorem. Quisque odio est, sagittis nec accumsan ut, placerat : 
amet lectus. Curabitur aliquam dignissim felis, a malesuada leo fringilla at. Sed ornare aliquet lacus, quis 
imperdiet augue mattis eu. Nulla porta odio ut erat consectetur at molestie justo suscipit. Aenean convallis 
pellentesque nisl, vitae posuere mauris facilisis vitae. Morbi in tellus nisl, vel facilisis diam.</div></di' 


Figure 3. Page source showing Javascript Jquery libraries loaded 





Listing 1. postload.js 


// Set navigation menu cookie Smenuvalue = ‘pages’; 
function setnavitem(item) { } 
$.cookie(“navmenuitem”, item); foreach (Scontent tables as Scontenttype) { 
} // Build the option for the content type 
Listing 2. menu.inc SOpEION “= <bUEtOn onclick setmavitem. . 
<?php »conkentt ype.” \"); 
COCUMEME VOCAnMIONn renoad( truely 2 2 oObhseine 
function menu(Stype) { S UciEst(sConmment hype. </burron> onbop,” 
SOLESEL ta, 
require INCLUDES . ‘content.inc’; 
} 
if (Stype == ‘navigation’) { 
Smenu = ‘'; 


// Build select statement for each content type 


ae em Smenu .= ‘<div class ="menu-’ . Stype . ‘">'; 
// Omit the UNION keyword on the last item Sent) == i! eS ta yO) ae eete =. 
Smenuvalue.’)</h2>'; 
Soffset = 1; Smenu .= ‘<p>&nbsp;</p>’; 
peau Joltec — COUNT (|. Convene valle )), Smenu .= Soption; 
Sscin= ss Smenu .= ‘</div>’; 
SOpE Lom = =>" % 


return Smenu; 


// Get the value of the cookie if set } 


if (isset($ COOKIE[ ‘navmenuitem’ ]) ) { 


emenuvalue = $ COOKIE[ ‘navmenuitem’ |; 


}else { 
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Step 1 - Handling the user interaction 
Ensure you have downloaded the Jquery libraries as de- 
tailed in the previous article. If you view the page source 


FreeBSD. 





First FAQ 


Aenean volutpat, ligula vitae laoreet dapibus 
Navigation (news) 
1.Pages || 


2.Faqs | | 3.News | 





2013 Rob Somerville meibmervilie co.uk 27/7/2013 17:07PM 


a i pre er a Se RPT eT 





ee 
Aenean volutpal, ligula vitae laoreet dapibus 
| Navigation (pages) 


| 1. Pages || 2. Faqs 3, News 


» Prva) ree 








“*. 4 = * cesses HTML Ch fart DOM Met Ceekes = 
- Cookies = Filter = Default (Accept cookies) = 
. Ar, 19> bon 18 is 86fteq 


Figure 5. Cookie set in Firebug 


<!DOCTYPE html PUBLIC 


<head> 





".//W3C//DTD XHTML 1.0 Strict//EN" 
<html xmlns="http: //www.w3.org/1999/xhtml" xml: Lang="en"> 


for any page, it should be similar to (Figure 3). Modify post- 
load.js and menu.inc as follows (Listing 1 — 2). 

If you now navigate to http://voursiteip/faq/1, you should 
now see a page similar to (Figure 4). If you click on the 
buttons, instead of a Javascript popup you should see 
the navigation menu title changing to reflect the new se- 
lection. Using Firebug and the Cookie console, you will 
see the content of the cookie changing when a new menu 
item is selected. Deleting the cookie and refreshing the 





Listing 3. add to preload.js 


// Sie POueT lacs 


function preinit(){ 


‘none’; 


document pody. style drsplay = 


FUnecETOn  postimaic () 4 


$ (document .body) .fadeIn(500); 


Listing 4. Add to core.inc 


Add just after echo BODY; 


Senor —SeCinh prelim i </ ceeimn- 


Listing 5. Add to core.inc 
Ad@e ise DerOorersobvena Wush() 


Schon <script posuinilt) seri pe ~- 











"http: //waww.w3.org/TR/xhtml1/0TD/xhtmll-strict.dtd"> 


<meta http-equiv="Content-type" content="text/html; charset='iso-8859-1'" /> 
<link rel="stylesheet" type="text/css" href="/stylesheets/reset.css" /> 

<Link rel="stylesheet" type="text/css" href="/stylesheets/global.css" /> 
<script src="/javascript/jquery- 1.10.2.min.js" type="text/javascript"></script> 


<script src=" 





" type="text/javascript"></script> 


<script src="/javascript/preload.is" type="text/javascript"> 


</script> 


<title>FAQ 1</title></head><body><div id="faq"><div id="heading" 


class="heading-1">First FAQ</div><div 


id="content" class="content-1">Aenean volutpat, ligula vitae laoreet dapibus</div><div class ="menu-navigation"> 


<h2>Navigation (pages)</h2><p>&nbsp;</p><button onclick="setnavitem('pages'); 


document. Location. reload(true);">l1. 


Pages</button> &nbsp;<button onclick="setnavitem('faqs'); document. location. reload(true);">2. Faqs</button> &nbsp; 


<button onclick="setnavitem( '‘news'); 


document. location. reload(true);">3. News</button> &nbsp;</div></div><div 


id="Licence"><a href="Licence.txt" title="Copyright and Licence details">Copyright &copy; 2013 Rob Somerville 
me@merville.co.uk</a></div><script src="/javascript/postload.js” type="text/javascript"></script></body></html> 


Figure 6. Page source showing button options 
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Listing 6. Add to mysql.inc 


Returns an array of rows or NULL on no result 
iE OWNEIE OWL si Sell eStcicleco its (US sreplj) | 
// Returns an array of rows or NULL if no result 


Sdb = new mysgli(DBSERVER, DBUSER, DBPASSWORD, 
CHSDE) 


ie (2 db->commecercr eno. > 0) 4 
die(‘Unable to connect to database [* 
EC@D> comme upch ioc msl )r, 


} 
if ('Sresult = $db->query($sql)) { 
if (DEBUG) { 
die(‘There was an error running the query [* 
Sdo->error . ‘]’); 


} else { 
Grete ye 


while (Srow = $Sresult->fetch row()) { 
Sr[] = Srow; 

// Free the result 

Sresult->free(); 

7// Close the connection 

Sdb->close(); 

if (isset(Sr)) { 
return Sr; 


} else { 
return NULL; 


Listing 7. Add to core.inc 


function arraytolinks (Ssmysqlfetchrows) { 
require INCLUDES . “content oinc’ ; 


// Convert a MySQL result set into a set of links 





// Requires ID (page id), title and contenttype 


Sitinike =) -diveclass— menmulnmk a2 1 


clinks< = "<ul> 

if (Smysqlfetchrows) { 

foreach (Smysgqlfetchrows as Skey => Svalue) { 
// Convert the content type to the relevant 

table name. 


7) See Content .ine 


Sell = cic SSciccla (Swale ||” ||, Seemesae 


tables); 


Links. =) “<li><a rer—“/" {soath. / 7 ovelue [Ola 
title="' .Svalue[1].’”>’. 


Sricullie [Iu <a a leat 7 


} 
SHRINKS jae eile 2 
Suicnikee = ay CW: 
}else{ 
Slinks .= “<li>Sorry = no Content available</ 
i <7 wc esi = s 
} 


return Slinks; 
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Listing 8. Full listing of menu.inc 


<?php 


function menu(Stype) { 


require INCLUDES PoC ube nia sililerg, 


if (Stype == ‘navigation’) { 


Sotiset = 1: 
receedortes — COUNT (> cColrcntusealle.), 
Soils °': 


Soption = > 


Vo SC Cee chic enna Oe bhOmCOO mle nee Gai 


if (isset($ COOKIE[ ‘navmenuitem’ ]) ) { 
-MenuUvelle = > COOKIE “Nevmenuttem jy; 
}else{ 


Smenuvalue = ‘pages’; 


foreach (Scontent tables as Scontenttype) { 


7// Borla Ehe Option tor Ene Conbenk type 


Soption .= ‘<button onclick="setnavitem(\’’. 


Scontentiyoe. \" ); 


document. location reload (true) ;">" -Softset.". 


‘uchest (Scombenttype). <7 button> nese.” - 


Soffset ++; 


// Build the SQL statement for the menu item selected 





Ssql = “SELECT id,title,’”.Smenuvalue.”’ AS 





contenttype FROM “.Smenuvalue.” 


WHERE stetus —= 2 ORDER BY tara: 








i) (GS tee ase 


Leche — siya Eovemeone (ce 1); 


/7/ Convert Ehe array inte HIME Links 


Slinks = arraytolinks ($result) ; 


omen — ies 


Sment, <= “<div class = menu—* Stype ear 
»mend = 9 <iZ> “a UeCHESoE (type) a.) a 
Smenuvalue.’) - ‘.Scategories.’ 
categories</h2>’; 
SMeml y=" “<“O-6nbsepPa/p> : 
Smenu .= Soption; 
Smenu .= Slinks; 
Smenu .= ‘</div>’; 


return Smenu; 


Listing 9. Changes to faq_tempate.inc 
render (Stheme[ ‘heading’ ]); 
render (menu (‘navigation’)); 


render (Stheme[ ‘content’ ]); 


Listing 10. Modify global.css 


.menu-navigation { 
background-color: #E5E6AD; 
border: lpx solid #DADADA; 
Padding: 10px; 

Hoge: Tigiviey 

iiaia Caine Ie OOse: 


Mae Ii Om Om: sl Uioac 


#news, #page, #faq { 
border: lpx solid #DADADA; 
ease ers TleOhepce 
padding:) 20px; 
min-height: 640px; 


overflow: auto; 


Listing 11. Add global menu support to News, FAQ and pages 
templates 


Add at the beginning of each file (e.g. just before 
render (Stheme[ ‘heading’ ]) ;) 


render (menu(‘global’)); 


Listing 12. Add to preload.js 


fine rem ¢Gilebalimenu(){ 


S(function({) {S( “#menu”~ ).menu() ;})-; 
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Listing 13. header.inc 


Mewes WWW Wood) Dey <iiemly/ Dib <i inal = iae hem dice > 


<head> 
<meta http-equiv=”"Content-type” content="text/html; 
<link rel="stylesheet” type="text/css” 
<link rel="stylesheet” type="text/css” 
<link rel="stylesheet” type="text/css” 
<SeMUpt (ShC="/ Javascript jouery—lal0.2 mings” 
<script src=”/javascript/jquery.cookie.js” 
<ScCripe Src="/ javascript/j query -m min.) Ss” 
<SCrIPe Ssre="/ javascript, preload. js” 


</script> 





<!DOCTYPE html PUBLIC “=//W3C//DTD XHTML 1.0 Strict//EN” 


<html xmlns="http://www.w3.org/1999/xhtml” xml:lang=”"en”> 


charset=’ iso-8859-1'” /> 
href="/stylesheets/reset.css” /> 
href="/stylesheets/global.css” /> 
href="/stylesheets/jquery-ui.css” /> 
type="text/javascript”></script> 
type="text/javascript”></script> 
type="text/javascript”></script> 
type="text/javascript”> 








page should load the default menu type of Pages (Figure 
5). The titles have also been cleaned up using the PHP 
function call to uppercase the first character 
of the selection, and we have added a sequential option 
number to each menu item. 

One disadvantage of this method is the following piece 
of code as shown in (Figure 6). Each button has two piec- 
es of Javascript attached, and document. 


UeriIrest() 


setnavitem () 


. The former sets the cookie via our 
function call in postload.js (and subsequently via the 
jquery.cookie.js script) and then refreshes the page. This 
causes the page to flicker every so often when the con- 


location.reload () 
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My first page 
age header News 


Lorem ipsum doll pages 


Phasellus mon orci massa, nec feugiat sem, Vestibulum molestie interdum bibendum, Nunc quis eli 


ecletur adipiscing elit, Mauris interdum auctor tellus sed dignissim. 


nulla, sit amet rutrum lorem. Quisque odio esi, sagittis nec accumsan ul, placerai sit amet lectus 


Figure 7. FAQ page menu 


FreeBSD, 


tent is reloaded. A better way of implementing this would 
be to use Ajax, but for the time being, we will demonstrate 
a useful Jquery call — Fade in. 

Add the following code to preload.js (Listing 3) and core. 
inc (Listing 4 and Listing 5). 

This will halt the display of the page, allow the menu to 
be built etc. and the page will then fade in. The time can 
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Third FAQ 


Lorem ipsum dolor $4 amet, consectetur adipiscing elit. Aliquam eros Merigation {tage 2 categorion iegories 
nibh, dapibus sed suscipit nec, sollicttudin conque ante. Nulla lacinia {| 1. Pages: +) 2 2.Fags | is 3. News Yew | 
ullamcorper tristique. Nam id malesuada arcu. Pellentesque diam eros, aa 
Vanus al consequal sit amet, blandit ul neque. Donec lempor dignissim 8 ) 
lacus, sit amet faucibus leo. In commods omare sem, non euismod BS 
nunc aliquet solicitudin. Sed sollicitudin augue at lacinia tempor. 
Curabtur hgula éeft, vestibulum sit amet lacus vitae, cursus rutrum 


sapien. Aliquam elementum, augue a sodales venenatis, odio mi 











8 
tempus ipsum, congue gravida turpis est eu sapien. Nam viverra turpis 
non risus auctor vehicula. Etiam nibh diam, interdum non ullricies a, 
dapibus vel purus, Aliquam convalis interdum magna, Curabidur vilae lobortis massa, Nam pulvinar sed 


diam in adipiscing. Etiam ac lectus at purus porta vulputate. Integer convallis volutpal odio, eu lobortis 


Figure 9. FAQ news menu 








Third FAQ 
Lorem ipsum dolor sil amet, consectetur adipiscing elit. Aliquam eros Navigation (pages) - 3c egores 


perce iey 





nibh, dapibus sed suscipit mec, Ssolkctudin congue ante. Nulla lacuna \ 1. Pages iL 2 2. Fags ) i. Hew | 
oer exec a 

ullameorper tristique. Mam id malesuada arcu, Pellentesque diam eros, le 

varius at consequat sit amet, blandit ut neque. Donec tempor dignissim | 


: 
lacus, s# amet faucibus leo. In commode omare sem, non euismod 









nunc algquet solicitudin, Sed sclicitudin augue al lacinia tempor. Curabitur Egula elit, vestibulum sit 


Figure 8. FAQ fags menu 
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Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eros 

nibh, dapibus sed suscipit néc, sollicitudin congue ante. Nulla lacinia 

ullamcorper tristique. Nam id malesuada arcu. Pellentesque diam eros, 5 a a, 
fs 


Varius al consequal si amel, blandil ul neque. Donec tempor dignissim _ 





lacus, sil amel faucibus leo. In commoda omare sem, non evigmod 
nunc aliquet sollicitudin. Sed sollicitudin augue at lacinia tempor. Curabitur ligula elit, vestibulum sit 
amet lacus vwilaé, CUrSUS ruirum Samien. Aliquam élemeénium, augue a Ssodales venénalis, oda mm 


Figure 10. Jquery multi-level menu 
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be adjusted by incrementing or decrementing the fadetn() 
parameter. While this is not an ideal solution, it does dem- 
onstrate the ease of integrating Jquery with a web page. 


Step 2 - Displaying the links 
Now we need to plug in the SQL result to our menu mod- 
ule. Add the following code (Listing 6-8). 

We now need to make a few minor modifications at the 
theme and CSS levels, so change faq_template.inc to dis- 
play the menu before the content (Listing 9). 





Listing 14. Additions to menu.inc 


Add elseif at the end of the navigation block 


Smenu .= ‘<div class ="menu-’ . Stype . ‘”>’; 

SMenuy = alive, 2 Uichirst(Stype)) . 22 0. 
smenuveallie, i = 9" .sCavegouies .: 

categories</h2>’ ; 

Smeni <= “<p -anose,</p> 

Smenu .= Soption; 

Smenu .= Slinks; 

Smenu .= ‘</div>’; 


return Smenu; 


}elseif (Stype == “global”) { 


22 


<ul id="menu”> 
<li><a href="/">Home</a> 
<ul> 
<li><a href="/page/1”>Pages</a></1li> 
<li><a href="/news/1”>News</a></1i> 
<li><a href=”"/faq/1”>FAQ’ s</a></1li> 
</ul> 
</li> 
</ul> 


<?php 


Listing 15. Add to global.css 


~Ui-menu { 


Widtin: pO ps; 
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Useful links 
Jquery UI source — http:///queryui.com/resources/download/ 
Jquery-ul-1.10.3.Zip 
Jquery menu reference — http:///queryui.com/menu 





This will float the navigation menu on the FAQ page to 
the right and increase the height of our news, page, and 
FAQ content to accommodate the new menu. 

See (Figure 7-9) for the final result. | added an extra “Ip- 
sum Lorem” to pad the content out in FAQ 3. Note how the 
menu responds to user input decoupled from the content 
that the user is currently visiting. 


Step 3 - Global website menu 

Jquery provides an extensive library for the user interface. 
Rather than building the Javascript and CSS from scratch, 
we can install the CSS and JS libraries quickly into 
our CMS. 

Download Jquery-ui-1.10.3.zip and extract Jquery-ui. 
css into the stylesheets directory and Jquery-ui.min.js into 
the javascript directory. Use MC, or extract the file into a 
temporary area using unzip. 

Add the global menu to all of our content templates (news _ 
templates.inc, pages template.inc and fags tempate. inc) 
and add the Javascript function to preload.js. Add the Ja- 
vascript and CSS files to the header.inc file and add a new 
menu option to menu.inc and finally tweak our CSS file to 
reduce the width of the menu (Listing 11-15). 

Finally, visit the homepage of your site with your browser, 
refresh the page and voila, one multi-level menu (Figure 10). 


In the next part 
We will continue refining the menu system and start build- 
ing the user interface. 


ROB SOMERVILLE 

Rob Somerville has been passionate about technology since his ear- 
ly teens. A keen advocate of open systems since the mid-eighties, he has 
worked in many corporate sectors including finance, automotive, air- 
lines, government and media in a variety of roles from technical support, 
system administrator, developer, systems integrator and IT manager. 
He has moved on from CP/M and nixie tubes but keeps a soldering iron 
handy just in case. 
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Primer — Part 8 


In the eighth part of our series on programming, we will refine our 
Jquery menu and start building a user friendly interface to add 


content. 





What you will learn... 
¢ How to configure a development environment and write HTML, 
CSS, PHP and SQL code 


What you should know... 


« BSD and general PC administration skills 





the Jquery library. Looking at menu.inc, we see the 
menu is “hard coded” with a top level menu Home, and 
sub menu’s Pages, News and FAQ’s. To make our CMS 
user friendly, ideally we would store the menu values in a 
database table that we could access and amend from a 
web form (Listing 1 and Figure 1). 
Rather than building a custom page for each table, it 
would be good practice to design a set of global functions 
(e.g. sign on, retrieve fields, save fields etc.) and design a 


n the previous article, we implemented a menu using 





FreeBSD. 





Home Paspes 


isl malas ley) EWS 


My first page FA's 


Lorem ipsum dolor sit amel, consectetur adipinc ng elit. Maurie interdum auctor tellus ged SHNiSsim. 
Phazellus mon orci massa, mec feug at sem. Westibulum molestie interdum bibendum. Nunc gus eh 
nulla, sit amet rulrum orem, Quisque odio est, 5ag lis N&S ACCUMSAN ul, placeral sil amet tectus, 
Curabitur aliquam dignissim felis, a malesuada leo fringilla at, Sed ornare abquet lacus, quis imperdiet 
BUGUE mattis eu. Nulla porta odio ut eral consectetur al molestie usta suscol. Aenean convallis 


pellentesque nisl, vilae posuere mauris facilisis vitae. Morbe in tellus msl, vel facilisis diam, 


Figure 1. Original Jquery menu 
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template that we could change on a per table / form basis. 
We could then quickly build forms to modify each type of 
content. We also need to tweak the CSS for our dropdown 
menu. At the moment with the default CSS, the menu is 
floating to the left hand side. We will modify this to accom- 
modate a wider menu with more options. 


Step 1 

For the initial testing, we will hand code a menu in menu. 
inc and add a few placeholders. Once we are happy with 
the CSS, we will then add this to a database table and 
add our forms. In the next article, we will write the code 
to extract the menu values and fire them into Jquery. 





Listing 1. menu.inc 


<ul id="menu”> 

<li> 

<a href="/">Home</a> 

<ul> 

<li><a href="/page/1”>Pages</a></1li> 
<li><a href="/news/1”>News</a></1i> 

<li><a href="/faq/1”>FAQ’ s</a></1i> 

</ul> 

</li> 

</> 
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FreeBSD, FreeBSD, 





Home Pages Neves Fas Login Home Page: Page 1 Fay s Login 
My second page My second page Page 2 
H1 H1 
a abe Page 3 
Figure 2. Jquery menu horizontal Figure 3.Jquery menu with drop down menu 





Listing 2. Replacement Jquery menu 





<div id="jquerymenu”> <ul id="top-menu-user”> 
<ul id=”top-menu-home”> <li><a href="/login.php”>Login</a></1i> 
<li><a href="/">Home</a></1i> </ul> 
</ul> </div> 
<ul id=”top-menu-pages”> Listing 3. preload.js 
<li><a href="”">Pages</a> function globalmenu() { 
<ul> 
<li><a href="/page/1”>Page 1</a></1i> S(function() {$( “#top-menu-home” ).menu();}); 
<li><a href="/page/2”>Page 2</a></1i> S(function() {$( “#top-menu-pages” ).menu();}); 
<li><a hret="/pace/3”">Page 3</a></1li> S(function() {$( “#top-menu-news” ).menu();}); 
</ul> S(function() {$( “#top-menu-fag” ).menu();}); 
</li> S$(function() {$( “#top-menu-user” 
</ul> ).menu();}); 
<ul id="top-menu-news”> } 


<li><a href="">News</a> 


gui Listing 4. global.css 
<li><a href="/news/1”>News 1</a></1li> #}querymenu { 
<li><a href="/news/2”>News 2</a></1i> border: lpx solid #DADADA; 
<li><a href="/news/3”>News 3</a></1i> margin-bottom: 10px; 
</ul> height: 48px-; 
</li> paddang: Spx. 
</ul> background-color: #e8e7cf; 
} 
<ul id="top-menu-faq”> 
<li><a href="”>FAQ’ s</a> -ui-menu{ 
<ul> woe 2 ete. 
<li><a href="/fag/1”>FAQ 1</a></1li> } 


<li><a href="/fag/2”>FAQ 2</a></1li> 
<li><a href="/fag/3”>FAQ 3</a></1li> 
</ul> 
</\i> 
</ul> 
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Listing 5. create the menus table 


CREATE TABLE “menus ( 
~id*> int(11) NOT NULL AUTO INCREMENT, 
“Grsolo: ““rcoelaeue(}) INONE INIUIENit 
“menutitle  varchar(12) NOT NULL, 
“titleurl*® varchar(12) DEFAULT NULL, 
*submenutitle* varchar(50) DEFAULT NULL, 
~submenutitleurl* varchar(50) DEFAULT NULL, 
“order iInt(2) NOr NULL DEFAULE “0? > 
“enabled* int(1) NOT NULL DEFAULT ‘1’, 
“timestamp timestamp NOT NULL DEFAULT CURRENT _ 

TIMESTAMP, 

PRIMARY KEY (‘id*) 

) ENGINE=InnoDB DEFAULT CHARSET=latinl; 


Listing 6. populate the menus table 


ISERe UNOS Menic. (ad = Choup = Memimibiic Gre leuimlh = 


~submenutitle’, 
~submenutitleurl’, order’, enabled’, timestamp’) VALUES 
CE {quer yienin | Tome’: 7" NUL NUR ll 2013-09-02 
Lie oy hs 
(2,7 Jquerymenu® ; Pages” NULL, NULL NULE 2, 1,7 2013-09-02 
LS eo e 
(3,’jquerymenu’ ,’ Pages’ ,NULL,’ Page 1’,'/ 
Dede eal Ae OCS. WG G33), 
(4,’jJquerymenu’ ,’ Pages’ ,NULL,’ Page 2’,'/ 
Wade 3 vig’ 20m 0060 ly oe 28.) 
(5,’jquerymenu’ ,’ Pages’ ,NULL,’ Page 3’,’/ 
ages 7 30, 20s a09 207 a eo ae): 





Listing 7. amendcontentpage.php 
<7 Ono 


require once ‘includes/cms.inc’; 
require INCLUDES Be OMUCmiEs tier. 
require INCLUDES TCORSENee, 
require INCLUDES Chimie ene. 
require INCLUDES “mys, ie; 


// SOl Statements 





9sql[0] = “SELECT COUNT (DISTINCT TABLE NAME) FROM 
INFORMATION SCHEMA.COLUMNS 





WHERE ‘Geble schema =" “freebsdems” 
AIDE ATS NAD ee ee 
Poql i =) Sseleer 
TABLE NAME, COLUMN NAME, COLUMN DEFAULT,IS _ 
NULLABLE, DATA TYPE, 





CHARACTER MAXIMUM LENGTH 


FROM INFORMATION SCHEMA .COLUMNS 
WHERE ‘Cable scheme = “freebsdcms” 
AND Bh NAME = Sea Pea 


ORDER MEY telat name Ordinaleeostt ton =; 


(7 Shewecaoles we wil eciMlow tne slsoew tO. CCdtn  ilcneeaks 


£Orm 
Stables[] = “faqs”; 
Stables||] = “menus”; 
Stables||] = “news”; 
Stables[] = “pages”; 


// Fields that are automatically assigned via a default 
value in MySQL table 
// definition 


Sekipllist i s= 1d 
Sskiplist[] = “timestamp”; 


ea a) 
eRe ay SVR ea) eG eee eee) 
ee ee eee eee Cee eee eee eee ee eee ace a. 
// Build the page up to the body tag 


outfile (TEMPLATES ‘header.inc’); 


echo wraptag(‘title’, ‘Content Input’); 
echo HEAD; 

echo BODY; 

// Page control logic 


TE(ISSCE( eeOot Peale 


// User has not selected a table or we are testing 


their result 


eee POST babies, 


Lt ineairay (st tabies) a! 


// Mk the table as noe on allowed: ist, bail to 
the first page 


buleapagem (cab lee), 


}else{ 
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// Check selected table is valid 
Ss = Ssql [0]; 
// Replace the marker in the SQL statement with 
the chosen value 
Popa eoet Ger eC (Qe see Ua eee cl 
ieee ee eid poo hoe. cnr, 
> Velie tables coun — stcoule) COUNT (DiS iiINer 
TABLE NAME)’ ]; 
TE(ovalid table count == 1) 4 
// Valid table selected - present form to 
edit data 
DUM seagerZ (2a, sdb, -skiplis«), 


}else { 


// Send user to first page 
tee aceon ( iealobec nr, 


jelseif (isset($ POST[“update”])) { 


// Save the input. As we have not validated this, 


just Cisplay for now 


DUEeeaden 20s yy, 


}else{ 


V7 Mavalioa valie — Trenirn wo Stare 


bud spaces (calles c, 


OM OO ee ge) 
PMT IIOP TO I fol 15), Mel PH Sle (eT ale eT Seley fee eg ely 
ee ea eC eet eae eae ded, 


function build page 1(S$tables) { 





// HTML form definition 


echo *<div ad="contene =’; 

echo ‘<div id="php”>’; 

echo ‘<div id="h1”>1: Select content</div>’; 

echo ‘<form action="amendcontent.php” method="post”>’; 


echo ‘<select name="table”>’; 


foreach (Stables as St) { 


// Stables is an array - split each value out 


echo “<Oprion value= ot. >" ok. </epriron - 


// Finish form and add. tooter 


echo ‘</select>’; 

echo ‘<input type="submit” value="Select content to 
edit 2"? 

echo ‘</form>’; 

echo ‘</div></div>’; 

echo ‘<div id="licence”>’; 

echo ‘<a href="licence.txt” title="Copyright and licence 
details”>Copyright &copy; 2013 Rob Somerville me@ 
merville.co.uk</a>’; 


echo ‘</div>’; 


ag obelenertroyol JoiWaLILel eevee 2 (Sie, SSiell Seco Livcie | (| 


// HTML form 


echo ‘<div id="content”>’; 

echo ‘<div id="php”>’; 

echo “<div ad="hl”>2: Edit <?php echo “st; 
e-enbsp content </div> - 


echo ‘<form action="amendcontent.php” method="post”>’; 


// Get the schema for that particular table 


oe 
Ss 


ssql[1l; 
Ste veplace( SSaoP0s=2° ob es.) 


eee 1 Wem ail eC Nepeeiee ae iioue a, 


Sdivstart = ‘<div class="inputname”>’; 
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echo ‘<input type="hidden” name="update” 


ValUeH yet. 


foreach (Sresult as Srow) { 


// Loop through each field and build the form 


fields depending on the field // type 


Sfield = Srow[1]; 
Sfieldtype = Srow[4]; 


abe iMac Weule ee oe kap sie) a 


if (Sfieldtype == “varchar”) { 


echo Sdivstart Lich~s: (sheld). 7 </ 


dav Input “elass="varchan” 


type="text” name="' .Sfield. ‘”><br />'; 


jelseif (Sfieldtype == “int”) { 


echo Sdivstart Wehrst (Site lay {<7 


div-<inou class="intk” 


type="text” name="' .Sfield. ‘”><br />'; 


jJelseif (Sfieldtype == “text”) { 


echo Sdivstart UeiiPSt (stella. <7 


div><textarea rows="10” cols="30"” 
Class— “textarce” Mame = sllielde, ><) 
be aucnase lowe fe 
}else { 
// Shouldn’t get here 
echo ‘Error field(*.Stfield.”) Me 


OMe: ally ee Or ls lnmee yl ce 


Srowls eee ore 


J; Pinash form and add footer 


echo “</select> - 


echo ‘<input type="submit” value="Save changes”>’; 

echo ‘</form>’; 

echo *</¢iy-</diy~’; 

echo ‘<div id="licence”>’; 

echo ‘<a href="licence.txt” title="Copyright and licence 
details”>Copyright &copy; 2013 Rob Somerville me@ 
merville.co.uk</a>’; 


echo “</div>; 


£unet1on build page 3(-posu 


77) eM 


echo “<div ad="content >’ - 
echo ‘<div id="php”>’; 
echo “<div ad—" hl’ 3* Save <onvent</div-’ > 


echo ‘<ul>’; 


foreach (Spost as Skey => Svalue) { 


// Just loop through and dump out values - we need 


to validate before adding to DB 


echo *<li><b- -skey. </o- 3. cvalue. </i>"? 


(7 ENG Of oxen 


ecns *jul- 297; 
echo ‘<a href=”amendcontent.php”>Return to add content</ 


ao 


echo ‘</div></div>’; 

echo ‘<div id="licence”>’; 

echo ‘<a href="licence.txt” title="Copyright and licence 
details”>Copyright &copy; 2013 Rob Somerville me@ 
merville.co.uk</a>’; 


echo ‘</div>’; 
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Replace the code in (Listing 1) with the code in (Listing 2) 
and modify preload.js as well as global.css to match (List- 
ing 3) and (Listing 4). This will provide the menu as shown 
in (Figure 2 & 3). 

Add jquery support for each menu: Listing 3. Add some ad- 
ditional CSS so that the individual menus line up: Listing 4. 


Step 2 - Create the menus table 
In MySQL, create the menus table (Listing 5). Populate 
with some basic menus (Listing 6). 


Step 3 - Build the amendcontent page 
The amendcontent page is a PHP script that allows the us- 
er to add new content to the CMS. As we have not validat- 





Listing 8. additions to global.css 


ftphp { 
min-height: 640px; 
margin-top: 160px; 


svarchar { 
background-color: #ced8f8; 
border: lpx solid #FFF; 
} 
Sere, 4 
background-color: #cef8f5; 
border: 1px solid #FFF; 
} 
.textarea { 
background-color: #e3f£3dc; 
border: 1px solid #FFF; 
} 
.inputname { 
color: tomato; 
font-size: 12px; 
width: 100px; 
float: left; 
font-weight: bold; 








Group Crows hace 
Barut Mestu title 
Titeur! https! haw. gocgie.coen 





= 
3: Save conten 


Updale: Menus 

group: Group name 

menutitle: Menu title 

teu: Pits yw Wid POC. COM 
SUE FeLi 

submenutitheurl: 

order: 12 


enabied: 1 


Heturn to add content 


Figure 6. What will be saved 





Useful links 

¢ Jquery UI source — http:/jqueryui.com/resources/download/ 
Jquery-ui-1.10.3.Zip 
Jquery menu reference — http://queryui.com/menu 
PHP manual — http://php.net/manual 




















Figure 4. Select the table to edit 
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ed the user input yet, we'll just capture the input for now. 
Create a new PHP file called amendcontent.php in the root 
directory where index.php is already saved (Listing 7). 

We need to add a small modification to global.css to line 
up the fields (Listing 8). Now visit http://voursite/amend- 
content.php and you will have a dynamic form ready to 
save data to any table in the CMS. See (Figure 4-6). 


In the next article 

We will use the data from the menu tables to populate the 
Jquery menus and write some validation code for the user 
input prior to saving to the database. 


ROB SOMERVILLE 

Rob Somerville has been passionate about technology since his ear- 
ly teens. A keen advocate of open systems since the mid-eighties, he has 
worked in many corporate sectors including finance, automotive, air- 
lines, government and media in a variety of roles from technical support, 
system administrator, developer, systems integrator and IT manager. 
He has moved on from CP/M and nixie tubes but keeps a soldering iron 
handy just in case. 
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Primer — Part 9 


In the ninth part of our series on programming, we will add some 
security to our CMS and refine our interface for adding content. 


What you will learn... 
- How to to configure a development environment and write 
HTML, CSS, PHP and SQL code 


amendcontentpage.php which allowed the user to add 

data to any table in the CMS (Figure 1 & 2). We will re- 
fine this page, and add a login page and the correspond- 
ing database table. Create a login table in MySQL to hold 
the user credentials (Listing 1). 

We require a blob field as we will be storing binary rath- 
er than string data for the encrypted password. The auth 
field will be used to define the user rights later on, but for 
the moment setting a value of 1 via the form we will con- 
struct will be sufficient. 

Now add the following to our global.css file to format the 
output from our amendcontent.php page (Listing 2). 

Create a file in the includes directory called login.inc 
(Listing 3). This holds the name and secret key for the 
login cookie. 

Create a new file login.php in the root directory of the 
application (Listing 4). 

Finally, amend amendcontent.php as follows. As there 
are a lot of changes throughout the file, the script is de- 
tailed here in its entirety (Listing 5). 

Hopefully, most of the code should be self explanatory, but 
here is a breakdown of the major functionality of each page. 


n part 8 of the series, we created the PHP script 


Login.php 
As we are storing the hashed value of the password in 
the database, rather than a text string that we can com- 
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What you should know... 


¢« BSD and general PC administration skills 
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Liptate: Menus 


Qroun Sroup name 
menutitle: Menu tithe 

Titer: Wthps www. Qoengke oom 
submenutile 

suibmenutileurl: 

onder: 12 

enabecd: t 


Figure 2. Saving the data 


TBO 01/2014 


FreeBSD Programming Primer - Part 9 








Listing 1. Create a login table in MySQL 


CREATE TABLE “login” ( 
“id Sinie( 5) unsigned Zeronl NOL NUL AULOS INC REM iENE, 
“username” varchar(25) NOT NULL, 
“password blob NOT NULL, 
erotica tate (Ll) Oar ANOLE 
“timestamp timestamp NOT NULL DEFAULT CURRENT TIMESTAMP ON UPDATE CURRENT TIMESTAMP, 
PRIMARY KEY (*id*) 
) ENGINE=InnoDB AUTO INCREMENT=9 DEFAULT CHARSET=latinl; 


require INCLUDES . ‘content.inc’; 

Listing 2. Additions to global.css require INCLUDES . ‘core.inc’; 
.tablehdr { require INCLUDES . ‘html.inc’; 

background-color: rosybrown; require INCLUDES . ‘mysgql.inc’; 

color: white; require INCLUDES. “login.anc’; 

float: left; 

font-size: 14px; // SQL statements 

font-weight: bold; 

line-height: 25px; Ssql[0] = “SELECT password,auth FROM login 

padding: 10px; WHERE username = ‘---PQ---’ 

width: 22%; AND password = “=>—PiS——7 5 > 
} Ssql[1] = “INSERT INTO ‘login® ( username’, ‘password’, 
.tablerowl { ‘auth’, “timestamp ) 

background-color: thistle; VALUES (*==-P0==—", (*===Pl-=-"),. -*=-=P2-=-" ; 

float: left; now())777 

font-size: 14px; 

line-height: 25px; 

padding: 10px; 

width: 22%; DL a Tr) Tal lel lal) Vlei lalla (el ailale i fl elai alot), 
} TT GT IG GI TEI I a ap 
.tablerow2 { Te ee a 7a), 

background-color: oldlace; 

float: left; // Delete these 3 lines after first user added 

font-size: 14px; 

line-height: 25px; TE (lrsset(o POST] action |) )q 

padding: 10px; createnewlogin(); 

width: 22%; } 


ITH I II TIS TI II TIS IIIA LI) VIVE ay a) oy 
Listing 3. /ogin.inc 


<7 pip 77 Page control logic 


define (‘KEYNAME’ ,’gp19867fghlls’); if (isset($ POST[“action”])) { 
define (‘LOGINKEY’ ,’117hkd323230rT’); 
PaCuLON= he POSE accion” |; 


Listing 4. login.php 
one if (Saction == “validatelogin”) { 
require once ‘includes/cms.inc’; if(isset($ POST[“username”]) && isset($_ 
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POSE] “password” |) 4 


Susername PoOLOSL Username |, 


> EOS! | password, |; 


Spassword 


// We have valid credentials, validate 


validatelogin(Susername, 


spassword, sql); 


jelseif (Saction == “createnewlogin”) { 


if (!isset($ COOKIE[KEYNAME] ) ) { 


// Create a new login to the system 


createnewlogin(Susername, Spassword,$sql) ; 


}else { 


// User failed cookie test, request them to 


regain 


igo ieee Oe alincke wells) 


jelseif (Saction == “appendnewlogin”) { 


~USsermame = 9 POosT| Username |; 
Spassword 7 POST | password |; 
SAU woes Ooll auem |; 


appendnewlogin (Susername, Spassword, Sauth, $sql) ; 


}else { 


// Invalid action - request login details 


ie SOMISSte LOG sincere! (0) 


}else{ 


(oy Walesa “alicia (ee) jeletolS 


BequcsulOgi nd eizaiehs (ly, 


Te ee Tela a (ee) eee) fe ee Gi ee) aa) 
RT MEM CU ae ae a Va a gga dae, 
ITAA 1/215) J) 8) IIA faa) 1G ISR) / 6 


function validatelogin(Susername, Spassword, $sql) { 


// As the password is hashed and hopefully cannot be 
decrypted, 
// We need to usend the encrypted password 


shasieds passwords — tach (“whirlpool 7 password), 


// Fetch credentials from DB, if match create a login 


cookie 


psy = oso Ol: 
Ss 
$s 
); 


Sie orale eset eo ail ome 


Sig ac Ole] ee ee Mee Neon ce pace wonday a> 


sresult = mysql fetchrows (9s); 


foreach (Sresult as Srow) { 


Sauith = srow lL 


if (Sauth == 1) { 


y) WCreate alin cookie 


setcookie (KEYNAME, LOGINKEY, time()+3600, “/”); 


/7 Waispllay options 


Stitle = ‘Welcome * . Susername; 


buildheader ($title) ; 


echo wraptag(“h1”, $title) ; 


echo ahref(‘Add or amend content’, ‘/amendcontent. 
Pape), 
Iso lchacrohacsie(™)\ye 


}else { 


(7) Viv, again 
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BOGUS WlOguNCeieciels ())\e, 


function createnewlogin() { 


Sipli les = “Creake new user = 


Scilace = ro pneoueaol * 


buildheader ($title); 
echo wraptag(“h1”, $title) ; 


echo ‘<form action="login.php” method="post”>’; 


echo ‘Username’ div(‘<input type="text” 





name="username”>’,Sclass); 


echo ‘Password’ div(‘<input type="password” 


name="password”>’,Sclass) ; 
‘Auth’ 


echo div(‘<input type="text” 





name="auth”>’ ,Sclass); 


echo ‘<input type="submit” value="Submit”>’ ; 





echo ‘<input type="hidden” name="action” 
value="appendnewlogin”>’; 
echo ‘</form>’; 


buildfooter(); 


function appendnewlogin (Susername, Spassword, Sauth, $sql) { 


// Create a new entry in the login table 


ehashed password = hash(“whirlpool’, Spassword); 


oo ocday 

Soe cetera eo am ee oe 

Si) =) Stele aceioliicics 1 loveisinetcl jes Saiveisel os 
); 

2 eee cle ae oa eee mo c 


Tih SCpaece hoe mcr, 


BeGquSouwlOCgune Secls is, 


function requestlogindetails() { 


Sree = 


Selacs.— 


buildheader (Stitle); 


echo wraptag ("“hil”, stitle); 

echo ‘<form action="login.php” method="post”>’; 
echo 
name="username”>’,S$class) ; 
echo 
name="password”>!’ ,$class) ; 

echo ‘<input type="submit” value="Submit”>’; 
echo ‘<input type="hidden” name="action” 
value="validatelogin”>’; 


echo 


bua ldtooter () >; 


function buildheader (Stitle) { 


// As cookies need to be set before any output is 
sent to the browser 


// use a function call to build the page header 
// Build the page up to the body tag 

outfile (TEMPLATES 
echo 
echo 
echo 


echo 


echo 


function buildfooter() { 


echo 
echo 
echo 


echo 


details”>Copyright &copy; 


Mervillencomk<)4-" 


echo 


“Please login”; 


Porm mmp lie. 7 


‘Username’ div(‘<input type="text” 





‘Password’ div(‘<input type="password” 








‘oy Eom = 


‘header.inc’); 
wraptag(‘title’, $title); 
HEAD; 

BODY; 

<div id-“conrent = 


“<div id="php >"; 


Neca 

SEG Ke alia 

‘<div id="licence”>’; 
‘<a href="licence.txt” title="Copyright and licence 


2013 Rob Somerville me@ 


Se ie 
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Listing 5. amendcontent.php 


<7 plo 


require once ‘includes/cms.inc’; 
require INCLUDES . ‘content.inc’; 
require INCLUDES . ‘core.inc’; 
require INCLUDES . ‘html.inc’; 
require INCLUDES . ‘mysql.inc’; 


7/7  SOlimstanements 


2sql[0] = “SELECT COUNT (DISTINCT TABLE NAME) FROM 
INFORMATION SCHEMA.COLUMNS 
WHERE “cable rschema = “treeosdcns: 
Ah AB NAM ep See ea? 
ssql[1] = “SELECT TABLE NAME,COLUMN NAME, COLUMN _ 
DEFAULT, 1S NULLABLE, DATA TYPE, CHARACTER MAXIMUM _ 
LENGTH 
FROM INFORMATION SCHEMA .COLUMNS 
WHERE Geble schciia = = —treebocems 
AND ABE NA == 0! 
ORDER BY Galle name, ordina ky OOstiL Len; 
SsQliZt = = sELECi a PROM e=-— PU -— ORDER Bi wid Weer: 
9sql[3] = “SELECT COLUMN NAME FROM INFORMATION SCHEMA. 
COLUMNS WHERE TABLE SCHEMA = ‘freebsdcms’ AND TABLE | 


NAME = ‘---PQ---'"; 
$sql[4] = “SELECT ‘---P0---* FROM ---P1--- WHERE id =’-- 
-P2---'"; 


4/ The tables we walleallow the wser to edit via tints 


form 
Stables[] = “faqs”; 
Stables|) = “menus”; 
Stables|] = “news”; 
Stables[] = “pages”; 


// Fields that are automatically assigned via a default 


value in MySQL table definition 


Sskimbist |e ares 
Sskiplist[] = “timestamp”; 


Oe eR ee ee ee ae) 
FLT STOTT I Fol) 18 SAT I SM TL Ile) SOIL) eI 1) Seley 
TTT AAAS AGO TATA AI ATA TAT IAA AIAG 


// Build the page up to the body tag 


outfile (TEMPLATES . ‘header.inc’); 

echo wraptag(“title’, “Content Input’ ); 
echo HEAD; 

echo BODY; 

// Page control logic 


DE(PSSCE(o POSE | table a 


// User has not selected a table or we are testing 


their result 


Ste POSE take |), 


DG lerainely Gots wal hes!) ))a 4 


// Tf the table is not on allowed list, bail to 
the first page 


UG pag em in aaloles)s, 
jelse{ 

// Check selected table is valid 

Ss = Ssql [0]. 

// Replace the marker in the SQL statement with 
the chosen value 

eet 10 re © Op eee eee ele 

Pie ct lice —smyec¢ mecclecul. co, 

veld) tablescount = otesulc | COUNT (Dist iNer 
TABLE NAME)‘ ]; 


tf (oval vablevcoune =—— 1) 


// Valid table selected - present form to edit data 
bie pagan, ccs lane ints iy). 


}else{ 


// Send user to first page 
build page sl (> cables )y 
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jelseif (isset($ POST[“update”])) { 


// Save the input. As we have not validated this, 


Use cvsplay FOr mow 


lstlalicl josie SS POS): 


jelseif (isset($ POST[“id”])) { 


// Save the input. As we have not validated this, 


USE splay FOr now 


echo “Updateold record”; 


}else{ 


j/ Mavelito velic — rerurn wo Stare 


DueiGnpadce i etablee, 


UG I at UG MIATA TE GA To IIo gays 
ea) a a) ae 
ITI IT IIIT IT II III SEA GAS Sa: 
£unetron burldy pagel (- cables) | 

// HTML form definition 

echo ‘<div id="content”>’; 

echo “<div id="php">’ ; 

echo ‘<div id="hl1”>Select content</div>’; 

echo ‘<form action="amendcontent.php” method="post”>’; 


J tile the lash on babies 


Sirabileconit mole 5° 


Stablecontrol .= ‘<select name="table”>’; 


foreach (Stables as St) { 


// Stables is an array - split each value out 


Stablecontrol «= *<option value="" «St.’ ">" st.’ </opticon-'; 


Stabpleccntrol e= 9 </select>’ = 


// Build the edit options 

seditcontrol =! > 

Seditcontrol .= ‘<input type="radio” name=”"inputmode” 
value="new” checked="checked”>Add new content’; 

Seditcontrol .= ‘<input type="radio” name=”"inputmode” 


value="update”>Update current content’; 


// Build the submit option 


SSsubMmieconzno ll — > 
Ssubmitcontrol .= ‘<input type="submit” value="Create 


content >"; 

// BAd the DIV to forma the controls 

echo div(Stablecontrol, ‘formcontrol’); 

echo div (Seditcontrol, “formcontrol’ }; 

echo divi(ssubmitcontrol, “foumeontuol” ); 

// Complete the form 

echo ‘</form>’; 

GGho, </cin- a dine 

echo ‘<div id="licence”>’; 

echo ‘<a href="licence.txt” title="Copyright and licence 
details”>Copyright &copy; 2013 Rob Somerville me@ 


Mer vanlilieonCconuike</ 2) 


echo ‘</div>’; 


Functvon build page 2 (5, sol sokiplie || 


7) HM, ee@aam 


echo ‘<div id="content”>’; 


echo ‘<div id="php”>’; 


// Check we have a valid inputmode 


if(!isset($ POST[“inputmode”])) { 


echo “Error: Invalid inputmode”; 


exit; 


}else { 
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if($ POST[“inputmode”] == “new” || (isset($ 
POST |“ rowie” | jo )4 


// New content - populate with selected value if we 
have arrived here 


// via an update content request. 


if(isset($ POST[“rowid”])) { 


prowid = 5 POST rowid” |); 
Spopulate = TRUE; 


}else{ 
ice abel = ss 


Spopulate = FALSE; 


echo ‘<div id="h1l”>Create new ‘.St.’ content</ 
Gang. 
echo ‘<form action="amendcontent. php” 


method="post”>! ; 


// Get the schema for that particular table 


Ss 
St 


ssql[1]; 
Stim eeplage( "so PUeae oC oe)? 


sageelle — iilerecl imeieelmcions (Sis) > 
Sdivstart = ‘<div class="inputname”>’ ; 


Sach lon —— See. ? 


echo ‘<input type="hidden” name="update” 


Vale ci ee 


foreach (Sresult as Srow) { 


// Loop through each field and build the form fields 
depending on the field type 


Sfield = Srow[1]; 
Sfieldtype = Srow[4]; 


Guin che igehy (oule Gwe Sip ieee 


if (Sfieldtype == “varchar”) { 


Svalue = populatefields ($sql [4], $field, $t, $row 
id, Spopulate) ; 


echo Sdivsteart . wetirst (Shelid) .’<~/div-<anput 
class="varchar” type="text” name="' .Sfield. ‘” 


value="'.Svalue.’”><br />': 


elseif (Sfieldtype == “int”) { 


Svalue = populatefields ($sql [4],S$field,$t,$ro 
wid, Spopulate) ; 


echo Sdivstart . ucfirst ($field) .’</div><input 


class="int” type="text” name="' .Sfield. 


value=" ~Svalue. “><br 7 >"? 


elseif (Sfieldtype == “text”) { 


Svalue = populatefields ($sql [4], $field, $t, 
Srowid, Spopulate) ; 


echo Sdivstart . ucfirst (Sfield) .’</ 
div><textarea rows="10” cols="30”" class="textarea” 


Mame) Shield a Soyo ities <7 textabead> 96 1) >"? 


}else{ 


// Shouldn’t get here 


echo ‘Error field("‘.Sfield.’ ) Me 


SEOWI ie | ee ocowl oles Ise bow) A ie sorrow hos) peor 


Se 


i eeno </select> | 


jelse1f (> POST[“inputmode”] == “update”) { 


echo ‘<div id="hl1”>Select content ‘.$t.’</div>’; 

echo ‘<form action="amendcontent.php” 
method="post”>’ ; 

echo ‘<input type="hidden” name="table” 


Vieneo=: Cerone ae 
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echo ‘<input type="hidden” name=”"inputmode” 


value="new”>’; 
Ss = Ssqil|3]; 


// Replace the marker in the SQL statement with the 


chosen value 
SG) = ssi teplace (“aa oP Ua— =! 5 ota os)? 
if (St == ‘menus’ ) { 
// 2B schema 1s dltterent 
17 NB= Maximum cols — 1s Unless mods to, css 
performed 
Sdisplaycols = array(2, 4, 5); 
}else{ 


// Everything else 


Sdisplaycols = array(1, 2, 3); 


// Get the field names for our table 
Sree las — nh holl eSciclnceis (es)! 3 

// Build the title row 

echo div(‘Select’, ‘tablehdr’); 
foreach (Sdisplaycols as Soffset) { 


echo div(Stitles[Soffset][0], ‘tablehdr’); 


Ss = Ssql|2]; 
Szepra = 0; 


Saction = “pdate’ - 
// Replace the marker in the SQL statement with the 
chosen value 


SS = Stesreplace 4 “S==b0es= 7 Se j. 25 3) 


Seeelilic = inhyeell seieehiceiis (os)! 5 





foreach (Sresult as Srow) { 


if (Szebra == 0) { 
Sclase = ‘cablerowl’ - 
S7ebra = 1 
jelseif ($zebra == 1) { 
Selass = “tablerowzZ! 
Szebra = 0; 


ji Radio: bukTwon cont col 


Seditcontrol = ‘<input type="radio” name="rowid” 


Velie=-(orow WO =: 


// Check formatting end output 


fOkKMNAEeCOneenbeCiUl bow, sClass,. sGasplayCols, 


Sed tcontrol) 


}else{ 


echo “Error: Invalid inputmode”; 


exit; 


j// Pinish form and add footer 

echo ‘<input type="submit” value=""’.Saction.’ ‘.St.’ 
item”’>’; 

echo ‘</form>’; 

echo “</div-</div- 

echo ‘<div id="licence”>’; 

echo ‘<a href="licence.txt” title="Copyright and licence 
details”>Copyright &copy; 2013 Rob Somerville me@ 
merville.co.uk</a>’; 


echo “</div>: 
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LuNnetion biel epagems cost) | 

// HTML 

echo ‘<div id="content”>’; 

echo ‘<div id="php”>’; 

echo “<div id="hi”>Save content</div>’-: 
echo ‘<ul>’; 


foreach (Spost as Skey => Svalue) { 


// Just dump out values - we need to validate before 


adding to DB 


ovale. (abt 


echo ‘<li><b>’ .Skey.’</b>: 


// Meme Oi or Orn 


echos *</il <br/>’ = 


echo ‘<a href=”amendcontent.php”>Return to add content</a>’; 


echo ‘</div></div>’; 


echo ‘<div id="licence”>’; 





echo ‘<a href="licence.txt” title="Copyright and licence 
details”>Copyright &copy; 2013 Rob Somerville me@ 
merville.co.uk</a>’; 


echo “</diy—’ : 


function formatcomtentedit (stow, Sclass, sdisplaycols, 


Seditcontrol) { 


// Formats the rows from our select query in zebra 
1EONAUNSUC - 

// To prevent the CSS from breaking due to NULL 
(CloiMicsinue 

// and displays the appropriate rows as the menu 
schema is 


// different from everything else. 


// Display the radio button 


echo div (seditcontrol, selass)-: 


// Format each row 


foreach (Sdisplaycols as Soffset) { 


j/7/ Pirst check we have Some content -—- wse a NBSP 


if NUE or blank 


Treo LOW oomes ctl m=— et 


Srow[Soffset] = ‘&nbsp;'; 


// Ensure length < 25 chars, else add elipses 


fi (strlen (srow|Softiset|) > 25)4 


Srow |SOLrEeser) = substr(Srowl|Soriset|,70,24) 


// Display each field from the row 


echo div (Srowlsofbeser|, Solace): 


function populatefields ($sql, $field, $t,Srowid, $populate) { 
if (Spopulate) { 
2 Oe inte pc Com (tea OO ee tC ogi 
ace as Oe ie ec ee ee ee eo 


Poe = oie hep Nees Mee ae aa a OW MOS a) 


Sv = mysql fetchrows ($s) ; 


Sv LO ed: 


Svalue 


}else { 


W/T 


Svalue = : 


return Svalue; 
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FreeBSD. a) FreeBSD, 


Select content 
fay 





Create new user 





Username 
= ® Add new content © Update current content 
Password Saxake contens 
Auth 
(4 
Submit 
Figure 3. Creating a new user Figure 6. Choose your content type add new or update 


FreeBSD. FreeBSD, 





Please log n Creale new fags content 
Username Tra 
beni 
Password Content 
Submit 
Slats 
Sat Fg item 
Figure 4. Logging in Figure 7. Adding anew FAQ 


FreeBsD, FreeBSD. 








Weloome admin Select content fags 
Acid on amend canient ea] eee] Pate i] 
Fao 10 Tenth Fad Aenean voluipal igadla _. 
FAQ a Ninth Fac Aenean voluipal. ligula 
oe FAQS Eighth Fat Aenean voluipad gals _ 
Fag? Seventh FAQ ey 
Fao6 Sixth FAG Aenean vohdpal, bgla 
Fas Fith FAQ foe nee pee 
FAQ4 Fourth Fill Aenean volipal igs _. 
Fad Thind FAG Lorem peau dolor sf am 
FAQ? Second Fac Aenean voluipat. ligula 
FRO First FAQ eyes 
Wipe fags ier 
Figure 5. Add or amend content Figure 8. Choosing an existing FAQ to edit 
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pare, we need to initially seed the database with a valid 
username and password the first time login.php is run. 
Once the login table is updated, the call to createnewlogin () 
can be removed. The page control logic branches de- 
pending on the action we want to achieve, and the corre- 
sponding function calls either build an HTML form, query 
the database or add a user to the database. 


Amendcontent.php 

Most of the action takes place within build page 2. In the 
previous version, we could not select any previously en- 
tered content so to add this functionality we have added 
an intermediate step which displays all the content avail- 


FreeBSD, 


Creale new fags content 
fag) 
Eighth Fag 


herean veletpat, Wigula witiw 
ft dapabes 


Figure 9. Editing a pre-existing FAQ 


FreeBSD. 


Save content 

o UpGale: Tage 

o tile: FAQ 6 
heading: Eighth FAQ 
content: Aenean voluipal, ligula viae laoreet dapenus 
Slatus: 2 


Return to add content 


Figure 10. Saving the FAQ 
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able to be edited. Once the user selects the table record to 
be amended, this is fed back into our original form, which 
is essentially identical whether we are updating or adding 
content. Some “bells and whistles” are added in the form 
of zebra striping of the table rows, and the automatic gen- 
eration of the titles. As the script is referring directly to the 
database, we need a conditional branch at line 266 as the 
menu table has a different schema from the pages, news 
and FAQ content. 


Getting it to work 


Visit the login item via the menu and create a new user and 
password with an auth level of 1. Check the user has been 


Update eens ier 








Create new menus conten 
— Aietyit 

Mere ine Pages 

TEea! 

omnes = Page 2 


Toate ied iat | ipage/z 


Figure 12. Saving a menu item 
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Useful links 
PHP manual — http://php.net/manual 


added to the login table and remove the 3 lines from the (\ 
start of login.ohp as commented. Revisit login.php, login 
and proceed to edit your content as desired (Figure 3-12). 


| 
| 
tH 


Further tuning 

The security is poor — we can have multiple users with 
the same name and password. A better form of encryption 
other than hashing is desirable, and we are missing lots 
of backlinks etc. We should also refactor the code e.g. the 
license and footers. 


In the next part 
We will address these issues and more. 


ah 
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FreeBSD Programming 
Primer — Part 10 


In the tenth part of our series on programming, we will improve the 
login process, add more security, and keep spam robots under control. 








What you will learn... What you should know... 
- How to to configure a development environment and write +» BSDand general PC administration skills 
HTML, CSS, PHP and SQL code 





n the previous article we put in place a very crude login password stored in the CMS database, then writing a cookie 

system that allowed anyone to login to our CMS and add __ at the client side. It is then a simple matter of checking that 

content. We assume that the user has been correctly au- authorization has been granted prior to carrying out sensitive 
thenticated by comparing their password against a hashed actions (e.g. adding a user or amending content). 





Listing 1. Logout function 


LUMCE POM OCgeuE (| requestlogindetails(); 


setcookie (KEYNAME, LOGINKEY, time()-3600, “/”); 


echo “You have been logged out”; Listing 3. logoutform 


fumerionm Mogoucrorm(){ 


// Check if user is logged in, if so display the logout 
Listing 2. Adding the logout logic et eon. 
}elseif (Saction == “appendnewlogin”) { 
require once ‘includes/cms.inc’; 
Duseuseneou— eb Ooll Username |, requice INCLUDES. = “login ine’ : 


Spassword = $ POST[“password”]; 
Sauth = $ POST[“auth”]; if(isset ($ COOKIE[KEYNAME])) { 


appendnewlogin(Susername,Spassword,Sauth,$sql) ; echo, *<diyead—" loqouk >’ 
echo “<form action= login-php” method="post” >’ ; 


}elseif (Saction == “logout”) { echo ‘<input type="submit” value="logout”>’ ; 





echo ‘<input type="hidden” name="action” 


// Logout the user velle= Ogoul 


Scho 4) Omir 


ogonmite (7 echo ‘</div>’; 


jelse{ } 


// Mivealid action Kequesi login details } 
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Unfortunately, exposing any login system on the World 
Wide Web leaves us open to undesirable elements. Brute 
force attacks (repeatedly attempting a login using diction- 
ary attacks) and spambots that want to add advertising 
or phishing spam are commonplace, and our basic login 
system needs to defend against this. We also need to add 
logout functionality to every page that requires it. 


The logout functionality 
As the parameters passed to the cookie that is set when 
we are logged in, it makes sense to hold the logout func- 


5 FreeBSD. 





« = Bee, Oo oie eh 
i ti r Gefaul: (Acempt cookies) © 
—rw ‘Wain Toe Gam Sire a f_piers «ieee feerity 


Figure 1. Login — no cookie present 


tion as part of the /ogin.php page. We can then detect a 
logout post event to /ogin.php and delete the cookie by 
setting the expire date to a time in the past. Add the follow- 
ing code at the end of /ogin.php (Listing 1). 

Now we need to check for a post event that carries the 
value logout. Add the following elseif branch between ap- 
pend and the closing else (Listing 2). 

We now need a logout form() function that will provide a 
logout button whenever a user is logged in to the system. 
If we check whether or not the user is logged in we can 
place this in the footer of all pages where login / logout 





ss Tg _ +33 a ne a ea a SE Be 


Figure 2. Cookie present but no logout button 





Listing 4. Test to see if user is logged in 


FUNGCELOn: TrnOrlogqgedi in) { 
// Check if user is logged in, if not, redirect to 


leg nae Owen 


require once ‘includes/login.inc’; 


if(!isset($ COOKIE [KEYNAME])) { 


header( ‘Location: http://’.CMSDOMAIN.’/login.php’ ) 


. 
y 


Listing 5. Set our domain 


7) Our comain 


define (“CMSDOMAIN”, ‘192.168.0.118’); 


Listing 6. amendcontent.php 

// Check we are logged in 
ifnotloggedin(); 

// Build the page up to the body tag 





outfile (TEMPLATES . ‘header.inc’); 


Listing 7. phpinfo.php 
<?php 


// Check we are logged in 


require once ‘includes/cms.inc’; 
Bequive NCU ME Sw COMcew tale. 
eoCUsae mC Ut seu mee Ome limes, 
ifnotloggedin(); 

phpinfo(); 


Fogoutrornn(); 


Listing 8. amendcontent.php and login.php 


echo BODY; 


logoutform() ; 


Listing 9. global.css 

#logout { 
Piece se aie: 
Deel aelinGd = Colom: seOmMcaEe, 
Paddang:. Spx; 


border=tadius 2) 0px; 
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Listing 10. validatelogin() 


FreeBSD. 


setcookie (KEYNAME, LOGINKEY, time()+3600, “/”); 


sect coment 
Page - 
® Add new content 0 Update current content 


// Display options 


Creeks content 





Stitle = ‘Welcome ‘ . Susername; 
mw & 3 = |" cies ML CHR Marien (GRAIN Bad Cabin. # iad 
lg feokies = Fils = Cela ooept cookie) » ' , 
rr buildheader ($title) ; 
~ aplil igeis ar ter 500.250 8 en 27 Geet HD MT 
Echo Weaptlagy hi jstac te): 
echo ahref(‘Add or amend content’, ‘/amendcontent. 
Figure 3. Cookie present — logout button visible pap) 


burldeooter(): 


Listing 11. Replacement buildheader‘(); 
Creshe mw Lage coctent 


tm function budildheader(Stitle, Storcelogour = 0) { 
Hemding 


cra 


// As cookies need to be set before any output is 





sent to the browser 


Ra Pil El eer poeta pre conn « = = // use a function call to build the page header 


= Caches = Fitter + Gerfauic [Acone copies) = 


16 a me f Sa EP Det KL ie Ga 7 






// Build the page up to the body tag 


Figure 4. Logout button visible on new faq’s page outfile(TEMPLATES . ‘header.inc’); 
ou hows heen logged cat 
echo Wraptag(“titile’ , stitle); 
echo HEAD; 
echo BODY; 


logoutrorm(storealogour): 


echo “<div id=" content” >": 


echo “<div 1d= php’ >’ ; 


er € = i= o BVH (CRA Seve GEM Hiei Gentin © a ilar 
ie Cocke Fier ||| Cant (compe cooked) © 





Listing 12. Amended validatelogin(); 


Figure 5. Logout message 
setcookie (KEYNAME, LOGINKEY, time()+3600, “/”); 


// Display opt tons 


Stitle = ‘Welcome * . Susername; 


The. peer ores i. Cree GS IE PRC Dae far Peay nen py Rois ee th PH 
Licewae in published! by the POP Croup and Fuki i He dstdiaitee on Loe Blin Locke 


buildheader ($title,1); 
echo wraorag ( mh” Startle) - 





kana 


i ee en A Oise 
ee 


+ gpthied Prge uk Bly dart ie lie i ! ha 3 Gan Seth Pe La cat 











Figure 6. Logout button on phpinfo.php 
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functionality is required, and the button will be displayed 
only if the user is logged in. Add this to the end of core. 
inc (Listing 3). 

We need to add a function call to check if the user is 
logged in or not, and redirect them to the login page if they 
are not. Add this at the end of core.inc (Listing 4). 

As we cannot guarantee that the user does not spoof 
HTTP headers for the redirect, define our CMS Domain 
in cms.inc. Replace 192.168.0.118 with either the IP ad- 
dress or domain name of your server (if accessible via 
DNS). (Listing 5) 

Add the ifnotloggedin() function call to the beginning 
of amendcontent.php and replace phpinfo.php with the 
content in Listing 7 (Listing 6 & 7). 








Figure 7. The fixed welcome page 





Listing 13. Amended logoutform(); 


function legouttorm(storcelogour, = 0) { 


77 Check 1f user is logged in, if so display the 
lkoeromie loner 


require once ‘includes/login.inc’; 


if(isset($ COOKIE[KEYNAME]) || Sforcelogout == 1){ 


echo ‘<div id="logout”>’ ; 


Listing 14. Add spambot field to requestlogindetals() in login.php 


echo ‘Username’ . div(‘<input type="text” 
name="username”>’ ,Sclass); 

echo ‘Password’ . div(‘<input type="password” 
name="password”>’ ,Sclass) ; 

echo ‘Email’ . div(‘<input type="text” 

name="email”>’ ,’ loginemail’); 


echo ‘<input type="submit” value="Submit”>’ ; 


Listing 15. Remove the comment out from createnewlogin, suffix 
with // to revert to normal login action 


TEC usscr(ome Oct. acurom )))) 1 


createnewlogin(); 


Listing 16. 


CREATE TABLE 
‘id int(1l0) unsigned zerofill NOT NULL AUTO INCREMENT, 


“access” ( 





“jpaddress’ varchar(64) NOT NULL, 
“page varchar(64) NOT NULL, 
“status int(1) NOT NULL, 
‘timestamp’ timestamp NOT NULL DEFAULT CURRENT __ 
MME OTAME TONGUE DEE CURRENT St ivinotaMn, 
PRIMARY KEY (*id*) 
) ENGINE=InnoDB AUTO INCREMENT=0 DEFAULT CHARSET=latinl; 


Listing 17. sq/istatements.inc 
<?php 
/* 

k 

* sqlstatements.inc 


~ Contains CMS: SOL statements 


* 


ee 
»sql [0] = “INSERT INTO access {( ipaddress , page , 
“status’, ‘timestamp ~) 
VALUES (‘---P0---’, (‘---P1l---'’), ‘---P2---', 


now());"; 


Ssql[l1] = “SELECT status FROM access 
Ia dsc tS er ee 
AND status > 0 


cela alias Meee 


Add the following line to cms.inc [Listing ] 


// Honeypot for bad traffic 


define (“HONEYPOT”, ‘www.google.com’ ); 
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Listing 18. mysq/_select() 


He esig@y Mey) plas EO Cren| creme 


Sdo = new mysgli(DBSERVER, DBUSER, DBPASSWORD, 
CMSDE) >; 


tia cdo Cole cure hENOm> a0) ay 
die(‘Unable to connect to database [* 
oe: 


~Cb=-eceMmec emer non 


} 


af ('sresult = Sdb->query (ssql)) { 
if (DEBUG) { 
die(‘There was an error running the query [* 
Sdb->error ee yes 
} else { 


die(‘’); 


// Pass our results to an array to be returned 
Heo Se (lee cae immo ey yy 


Sr = array(); 


Sr[] = Sresult->num_rows; // No of rows returned 
Sr[] = $db->field count; // NO? Of Columns ain 
table 


Sr[] = Sdb->affected_ rows; // No of rows affected 


e.g. update / delete 
// Append the results to our result count 
if (Sresult->num_ rows != 0) { 
ae eel leach NCA (tay eta ne ee A 


array (MYSOLI ASSOC)); 
} 


/ (cee enero sullr 


Sresult->free() ; 


}else{ 


Sr = NULL; 


// Close the connection 
Sdb->close(); 
return Sr; 
Listing 19. Additions to core.inc 
function loginsecurity (){ 
require INCLUDES ‘sqlstatements.inc’ ; 


(/ CeCtwel tent me adatecs 


$9 SERVER[“REMOTE ADDR”]; 





Sip = 


UP (iss cm (ome Ost) emenel |) yh 


// email will always be set, check if it is populated 


oom 20S) (Gl emeaan |e —— ea) 4 


(7) Bane em 


banip(sip,. lLocam-pnp- )}- 


}else{ 


// Check that they have not been flagged as 


Susp LeTous 
$s = Ssql[1]; 
os = stu veplace ( @>--P0--— 9) Sip, ss); 


Pecou he milo iprcec Miewe( oc) 


if (Sresult) { 


foreach(S$result as Srow) { 


Sstatus = Srow[0]; 


}else{ 
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// Redirect to our honeypost if status is set 


if(Sstatus !== 0){ 
header( ‘Location: http://’ . HONEYPOT ) ; 
} 
} 
} 
function banip(Sip, Spage) { 
require INCLUDES . ‘sqlstatements.inc!’; 

// SOC te our banilist 
os = Ssel [0]; 
So = sb beplaces (= oobUse= Gy acd ye o5)); 
OS) = owiggcop lace | (@) Sao ela pede sce): 
DiS gclete opihcicen (8 sme er eye eos), 
mysql select ($s); 
// Redirect to our honeypot 
headern( VWLocarion. mvp. /) a HONE EOn.)\e.- 

} 

function logip(Spage) { 
require INCLUDES . ‘sqlstatements.inc’ ; 
i) use Log ao vasa 
Sip = 9 SERVER[“REMOTE ADDR”]; 
2S) = sco uRii: 
Soe oe bench laces ( “Sao U=a= a roip os); 
ee) SS oieic ieejelleves {OSL SiseleiS Ss |) 
SS = sir ereplace, ( (=== P25—2) 4 Oi es JG 


mysql select ($s); 


Listing 20. Replacement validatelogin() 


function validatelogin(Susername, Spassword, $sql) { 


// Create a session to keep track of our login 


abeeiiprEs 

Seec me mmol aman): 

// As the password is hashed and hopefully cannot be 
decrypted, 

// We need to send the encrypted password 


Shashed password = hash(‘whirlpool’, $password) ; 


// Fetch credentials from DB, if match create a login 


cookie 

ss = $sql[0]; 

Dio tate OS ie) oak ae oc acm = conn) e, 

Oo eoletee ope inne ee he ea oncdmocico wor dm ames 


ie. 


PEecsuUliue= mMycqmeerercimows (os), 


if (Sresult) { 


foreach(Sresult as Srow) { 


Sauth = Srow[1]; 


}else{ 


Sele ieee 


if (Sauth == 1) { 


// Log our sucessful login 


login (login php: )-; 
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// Reset our attempt count in case they login 


again requestlogindetails(); 
Unse (> SESSION | \loginattenprs ])); } 
7) (heaves aul cookre } 
setcookie(KEYNAME, LOGINKEY, time()+3600, “/”); Listing 21. Modified buildheader() 
// As cookies need to be set before any output is sent 
i Display operons to the browser 
// use a function call to build the page header 
Stitle = ‘Welcome ‘* . Susername; 
// Check we are not on the ban list and that we are 
buildheader (Stitle,1); gene 2) Social iieleeye 


echo wraptag(“h1”,Stitle) ; 


loginsecurity(); 


echo ahref(‘Add or amend content’, ‘/amendcontent. 


oe. ee // Build the page up to the body tag 


bualdrooter() >: outfile (TEMPLATES . ‘header.inc’); 


Listing 22. Hide the email address field 


}else{ .loginemail { 


visibalvey: hvdden tinporrtant, 


// Keep a track of the number of attempts we have } 


made at logging in 


LE (leseu (> SESsiON | “loginatcempus |))4 


9 SESSION[‘loginattempts’] = $ 
SEUSS LON; WoGgineawmeenpEs Ih; 


}else{ 





9 SESSION[‘loginattempts’ ] 


Wl 
J 
“Ne 


// If they have exceeded our limit, ban ‘em 


Li(> ShosiON [  Teginecrencis | >.2)4{ 


Sip = $ SERVER[“REMOTE ADDR”]; 


bani (sip. Logi msohpe je 


(7 Wig sagen 
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FreeBSD, 


Please login 
Ligeia 


Password 





Figure 8. The login page with the email “honeytrap” 
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Add the logoutform(); after every occurrence after echo 
BODY; in login.php and amendcontent.php (Listing 8). 

Add the following to global.css to highlight and position 
the logout button (Listing 9). 

With Firebug enabled in Firefox, check that a cookie 
called gp19867fghl1ls is created when a user is logged in. 
The logout button should appear on all pages except the 
second time login.php is called and we arrive at the wel- 
come page (Figure 1 — 6). 

Now this is a problem, as we should be able to logout im- 
mediately after we login. Subsequent calls to login.php will 
show the logout button. So what is happening here? The 
problem lies in the validatelogin() function (Listing 10). 

We must set the cookie prior to creating the page header, 
but as the cookie data is generated at the client browser 
side when the page is loaded, as far as the PHP code run- 
ning at the server side is concerned the cookie is not pres- 
ent yet. We can fool buildheader() by passing a parameter 
to force the display of the logout button (Listing 11 — 13). 
This will result in login.ohp working as desired (Figure 7). 


Spambots and robots 

While we could use the very effective Apache MOD_SECU- 
RITY module to trap bad behaviour, this can be tricky to set 
up. What we will do here is monitor behaviour in two ways. 
First, we will create a hidden field that a normal user will not 
see under normal circumstances, which most spam-robots 
will fill in assuming it is a genuine field. On completing the 
field, our CMS will automatically ban all connections from 
that IP address to login.php permanently. 

We will also check that no more than 3 invalid attempts 
are made to the login.php page, and if that is exceeded, 
that IP address will be banned as well. 

First create another testuser by changing login.php 
as follows and visit login.ohp anew to create anoth- 
er user (e.g. Test, Test, Auth = 1). Don’t worry about 
the error messages — we will fix them later. Once you 
have created the new user, go back and comment out 
createnewlogin(); and check that you can login as the 
test user (Listing 14 and 15). 

If you visit login.php you should be able to login as Test 
(Ignore the Email field), then Logout. (Figure 8). Now cre- 
ate our access table in MySQL to hold our banlist (Listing 
16). Now create the file sqlstatements.inc in our includes 
directory (Listing 17). Replace the mysql select () func- 
tion call in mysql.inc with the following code (Listing 18). 
This fixes a bug where a PHP error is raised when no re- 
sults are returned. Add the following function calls to core. 
inc (Listing 19). Replace validatelogin() in login.php with 
the following code (Listing 20). Modify buildneader() in 
login.php to call 1oginsecurity() (Listing 21). 
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PHP manual — http://php.net/manual 





Testing 

It is recommended that you run Firebug to view the cook- 
ies and PHP sessions generated during this test. Clear all 
cookies etc. from you browser and visit login.php: 


¢ Login as Test with the correct password. You should 
be able to login. Logout. 

¢ Login as Test with the correct password and an email 
address. You should be redirected to google.com. Any 
visits to login.php will cause a redirect to google.com. 

¢ Use Adminer to clear all the entries from the access table. 

¢ Visit login.php and click on the submit button 3 times 
without making any input. You should be redirected 
on the 4" attempt. 

¢ Use Adminer to clear all the entries from the access table. 

¢ Visit login.ohp and login and logout as normal. Your 
access attempts should be logged correctly with IP 
address and date. 

¢ Login with a mixture of bad username and good 
password, good username and bad password. You 
should be banned on your 4" login attempt. 


CSS modification 

Finally, add the following code to global.css and refresh 
your browser with Ctrl F5 a couple of times to clear the 
cache. The email field should now be invisible to human 
visitors, but available to robots etc. (Listing 22). 


Next steps 

It might be a good idea to add the banlist functionality to 
all pages on a failed login etc. and keep a tally of what 
pages are accessed etc. legitimately. We also need to add 
the facility to add a user rather than manually editing code 
each time. Our CMS is getting quite large, with over 2,100 
lines of code (excluding the Jquery libraries) so we will 
look at refactoring some of this code in the next article. 


ROB SOMERVILLE 
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In the penultimate part of our series on programming, we 
will look at using the Netbeans Integrated Development 
Environment to debug and edit our CMS. 


What you will learn... 
« How to configure a development environment and write HTML, 
CSS, PHP and SQL code 


at the moment so this how-to is going to be very 

short. My local telco is currently rolling out fibre in 
the area, and my ADSL internet connection is very unreli- 
able, but hopefully | will be able to wrap up the program- 
ming primer in part 12 with a bumper edition. 

While debugging at the command line using echo state- 
ments or commenting out code is possible, a more fre- 
quent scenario is that our project will be residing on a re- 
mote server and we will need to see the actual processes 
in action. Often developers will have a local copy of the 
LAMP stack on their PC or laptop, so that they can de- 
bug locally. However, what happens when our develop- 
ment environment is on a laptop and the code is on a re- 
mote server? A frequent approach is to use an Integrated 
Development Environment (IDE) with a built in file trans- 
fer utility. Coupled with Xdebug, which supports PHP, we 
can download our remote code and debug (step through) 
each line, examine variables etc. To do this, we will need 
to install Xdebug on our server and install the IDE of our 
choice on an available local PC. This can be FreeBSD, 
Windows or Linux, but in my case | was using an Ubuntu 
desktop. The IDE installation will vary from environment to 
environment, full details can be found at hittps://netbeans. 
org. The IP address of of my desktop PC for this exercise 
was 192.168.0.123. 


nfortunately, the Internet gremlins have got me 


Installing Xdebug 

Rather than using the FreeBSD provided software, | 
downloaded the latest version from hitp://xdebug.org. 
The reason for this is that in the past | have had prob- 
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What you should know... 


« BSD and general PC administration skills 


lems getting the standard packaged version of Xdebug 
working with certain distro’s, where as the latest Xdebug 





Listing 1. /nstall Xdebug 


tar =xVvzk xdebug—Z. 7.3 .r0z 
ede xdebug—2 275 

phpize 

./configure —-enable-xdebug 
make 


cd modules 


Gp xdebug.so /usr/local, lib/php/ 201005257 
touch /var/log/xdebug.log 
chmod 666 /var/log/xdebug.log 


touch /user/local/etc/php/xdebug.ini 


Listing 2. /user/local/etc/php/xdebug. ini 

zend extension=/usr/local/lib/php/20100525/xdebug.so 
SOlSIOILIC). eeimmotete emia eo— oll 

xdehbug bemote most— T7163 70.175. 

Rdebug. Beiete wort — 9000 

debug. Lenore handler— “dogp 

xdebug. remote mode-regq 

NGeOUG puoi her vena le t= Il 

xdebug.remote log=/var/log/xdebug.log 


Listing 3. Restarting Apache 


/usr/local/etc/rce.d/apache22 stop 
/usr/local/ete/re.d/apache22 start 
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and latest Netbeans IDE always seem to work OK togeth- 
er. Once you have downloaded the latest version of the 
tarball (Currently xdebug-2.2.3.tgz) into your home direc- 
tory, on the remote server (192.168.0.118) as root, per- 
form the following (Listing 1). 

Add the following to /user/local/etc/php/xdebug.ini 
(Listing 2). 

Replace 192.168.0.123 with the IP address of your cli- 
ent machine. 

Restart Apache (Listing 3). 

lf we now login as admin and visit our PHPinfo page at 
http:/192. 168.0.118/ohpinfo.php, we should see that Xde- 
: ———— a = 2) Ee Fractious : 


o 192. 16800, 7 18 


eed 








Ohisid Preface 





=i 


(Pakegerian; Prodecte: 
i WTMLe ae PMP apglic ation | 
a Ez © PHP agalicatian with Iditing Seurcai 
ca - 1 sangies = 
Sascedptboni 


Deeley ide an dodetieg PHP 6 ape lcetion. crested & Meardard IME enejeck Fer it and | 
60s Up Cha pre}ece pregartiaa eeordingly. Gach prelace can Be aaallye run el 
detupyped. 


Figure 2. Create a new project with PHP application on remote server 
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bug is installed and running (Figure 1). If you have not al- 
ready done so, download and install Netbeans on a local PC 
of your choice. You will need a working Java installation and 
Firefox installed for this to work. 


en Pict Belg 
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2, Renan Caan erie 
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Gr njert parma Prac ie cad 





Geurces Feder 


| home /quecoter/MetBenmPra|ects/Pre eS C4 = Spee... 


Ber weermben: Fer Ge 
lS bra et i el ob alg Pe ee, 
Dake needing: = LTR 





| Put Maciaene metedste ints opeparete drachory 


bh Semcel) pele | 
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Figure 3. Give the projectaname 


Ce 





1. Chonda Project Specily thee wag thle pra] int's Men ail be deplayed, 
Z. Mee Local 
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or 
i, emote Connection 
4. Confirmacien 


Brae OLS hoppy ea. 





ROP Dee 8d Cle Ce defied: > St 


ST 


Lipuked Cinettens 


BP hes remeets pereaction caleccad, 


aGeck fete ih Concal Help 


Figure 4. Create a new remote connection by clicking on Manage 


3 Nel Beans |pe 






it ‘ ree =-- Pe 


bapa 
Recent 5 choses 

2. home aie a 

a, cemcie dialeg bow, 

4a Con 








Manige... 
Conseckbn Bere: [Presnn cma] | 
Concent | ST Ll 
Add. Comtigure Precy— 
GB ces 
aieck sects Mini Cowell = Salp 


Figure 5. Create a new SFTP connection (SSH must be running on Port 
22 of your server) 
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Useful links — 
- Xdebug: http://xdebug.org | 5 Ranch craton Teflon we dete te yu ch ih 


a, Solace Pocmnn cae Lee rece eben 


« Netbeans: http:/php.net/manual ag peered 
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ie | Figure 10. Load Index.php click on line 52 and start the debug session 
by pressing Ctrl F5 


Figure 7. A successful connection 


NetBeans nc —S Po PILLAGE Now follow the Figures (Figure 2 — 10). If all goes to 
plan, you should be able to step through your code by 
pressing F/, and interrogate variables by hovering over 
































pcp Uae wap heks peed Ue Ala wil be aphid, 


Mie ween Confipaethn bettas car be added ane modified later in cha Pract Properties dislog boa, them €.g. Srequest. While debugging, the breakpoint line 
See caedtire esate | should change colour from pink to green. If it does not, 





there is some mis-communication between Netbeans and 
the server. See xdebug.log for further details. 


(Lid sed back oe i 
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FreeBSD Programming 





Primer — Part 12 


In the final part of our series on programming, we wrap up 
using the Netbeans Integrated Development Environment 


to debug and edit our CMS. 


What you will learn... 
- How to to configure a development environment and write 
HTML, CSS, PHP and SQL code 


ny programmer or developer will freely admit that 
A his or her code is never finished. The best we can 
hope for is a piece of code that is bug free, reliable 
and extensible — i.e. we can accommodate future chang- 
es easily. Sadly, this is the last part of the our program- 
ming primer series, and while we have a lot of code (over 
3,200 lines excluding external libraries) a lot of further de- 
velopment is required to bring our fledgling CMS up to 
scratch. While | could carry on and take the project to the 
point where it is a fully functional CMS, | would not be able 
personally to support the code and testing cycle in the 
long term, so it it is now time for me to hand this embryon- 
ic project over to the community to add the final touches — 
and squash any inevitable bugs and areas of inefficiency 
that | have inadvertently included. Rather than me catch- 
ing the fish, it is now time for you to cast your rod into the 
deep pool where many fish — (including sharks) — dwell. 
In reality, the lesson of Part 12 of the series is probably 
the hardest in the series — wrapping your head around 





Listing 1. /user/local/etc/php/xdebug.ini 


zend extension=/usr/local/lib/php/20100525/xdebug.so 
KCSDUCE Gem@re rence leat 

ROe UGE GeMOUsmMNOsii=s IZ oom led 3. 

KdebuG -Gemote porn 7000 

RCePuG. Temove neandler="dogpr 

xdebug. remote mode-req 

xdebug.prorlen senab le. — wl 

xdebug.remote log=/var/log/xdebug.log 
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What you should know... 


« BSD and general PC administration skills 





Figure 1. Xdebug session initiated in browser 
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Figure 2. Breakpoint set and Netbeans communicating with remote 
server 
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Figure 3. Stepping into CMS.INC 
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Figure 4. Setting a watch expression 


Se 
fFeags 5 he @- ib-h- DOG & @ @ Estee 


ai ia 
at te - Sereu Fue oo €¢€o 6 wa @ 


ce OR 


ha a0 4 


Figure 5. Viewing variables currently set 
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someone else’s code and fixing or developing it. As a de- 
veloper, this has always been the biggest struggle | have 
had when faced with maintaining legacy code. It is very 
easy to “code from scratch” but the demons always lie 
further down the road. Hopefully, though you will have a 
head start so that life is a bit easier. 


Netbeans and Xdebug 

We covered setting up both of these in Part 11. Ensure 
your xdebug.ini is configured correctly and restart Apache 
if required /user/local/etc/php/xdebug. ini (Listing 1). 


Starting a debugging session 

To initiate a real time debugging session, open the FreeB- 
SD CMS project and navigate to line 12 of index.php. Click 
on the LHS margin next to line 12 to set the breakpoint 
(which should turn a salmon pink color), and press Ctrl F5 
to initiate a debug session. This should open your default 
browser (in my case Firefox) at the index.php file on the 
remote server with the parameter XDEBUG_ SESSION _ 
START passed to xdebug. This will cause the browser to 
report “Connecting ...” but no HTML will be parsed as Net- 
beans is now in control of the program flow. Switch back 
to Netbeans, and line 12 should be highlighted green — 
which means we are in debug mode and communicating 
with the remote server (Figure 1 & 2). 

Pressing F7 will walk you through each line of code, and 
Netbeans will automatically open the first file CMS.INC for 
you (Figure 3). Continue to press F7 until you come to line 
41 of index.php. 


Adding a watch 

A watch in debugger terms allows you to grab a variable 
and monitor its value in real time as you step through the 
code. Highlight s seRvVER[ ‘REQUEST URI’ ], right click and Add 
Watch. A dialogue box will appear, click OK and the value of 
this variable will be shown in the lower pane (Figure 4 & 5). 


The Call Stack and Breakpoints 

The Call stack shows us the code from each of the files 
that are open. For instance, the function buildpage() Is 
contained in core.inc. When we reach that point of execu- 
tion in the code, both index.php and core.inc will be shown 
in the call stack. Likewise, all breakpoints are shown in the 
lower pane (Figure 6 & 7). 


Watches and balloon evaluation 

lf we hover over a variable on the left or right hand side of 
a statement, we can determine its value. If the value is not 
shown, ensure this is enabled in the PHP configuration 
settings (Figure 8 — 10). 
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Figure 6. Viewing the call stack 
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Figure 7. Viewing breakpoints that are set 
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Figure 8. Real-time balloon watch 
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Figure 9. Viewing the SURI variable 


ol a " ee 
= 
a HB ie F 
* = Sl me 
“| . oO = 
*Ge 
= @ ire 
. 2 
2a 
ty 
‘oOo 
ee 
ou 
we 
a F 
a 2 
wi ct 
‘ a ane 
torts, r 
= 7 
fs 
ely ph Cy 
~ 4 
= =I 
2 
. 
ee a eT, aay 
ome 
te SL 
a2 


BH-O8- 2SePrFean FARE BE €£o Baw G 


{a 


Figure 10. Setting watches and balloon evaluation 





Figure 11. Setting an additional breakpoint 
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Figure 12. Note the Connecting delay as we step through the code 


oh i el: eee -@ TBPeh Gea h eae Ee ee nh e bth OC Bk od Ee 








= pecan = EBay. kee 6 Uethes § iB retenohe © ie = 
a|Fieg Sars attage | rere pro 6B ® ait sc ae rset cle - - 
* oe Frais soe, Oe a a el or ee i ne ae =k boat hisny BE BB: 2S FR FR HH #8 Bae 8 
2 Serirlics = wt vere de gran ee vt oe ir fi Linalert ad 
= i ae 4 = a ua PL = | 
a ma i i is a 
a amy = or * ior PAPE regan tf I 
a ce x 17s 
SB osope a 1 mgeetd = = 
aw n u i HL = DMTLIUDL © Let —A 
ee = O «Ane a 
oe eee Dr 7 
smies = at ian 
= a 
=u rs] a= u 1 
re oh php a OME = WL teervery ees t_ie! a) braces ny: 14F 
a i = Bortcet ide =a 
kare = | teaches ree 
Ml ings ty = @ pore a 7 UE i i a 
chit “i 1 
ar . a = ae me he = mL = 
a ain ‘He = Li = 
= Ts foelag = 4; = 
= oll Tite 
0 “i he “| 
= ir - 
ms —l 
a: 1 T 
ok io 
™ ‘ wee a 
ah o 4G tar = —_ rs a a) 
cr engine dye oa a “| 
= Sindee Saud] on ails ea = 
= 6 pula eae ae 
=u ih Prodbenpere lie ez og 
"i @ logruscuriby ad 
f=) lrah ia repeewt = ea que eat 
= | @ league candogout Wa At ipa - J 
= Sere dies aT ae 
- ‘Soo v | 
= i738 dea Lid 
y Dw | 1 
a 
seth i th & 
waebora al apo = Gi tan 2 all 
@ “Ts T = si wis 2 CST] 
BF I ' + Pinger gl 
PP fc Peat. ® no 
fat Ol 1 le Tin 
Poole m2) 
a i taal a 
2 @ 
hl aa @ 


etben arn mck rire * 1] 


=k aware * Sli 6k 


Figure 13. Breakpoints will be jumped over if code is not executed Figure 16. Content of the Sarray variable after first element is deleted 
in code 
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Figure 14. Stepping into the parse_request function Figure 17. Sparamcount 
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Program flow 

Set a breakpoint at line 46 of index.php. Navigate to .. / 
page/1 in your browser and step through the code using 
F/. Note that your breakpoint will be ignored as we are not 
making a request to the home page of the server. Also, the 
value of $array will change as we step through the code 
(Figure 13 — 18). Pressing F5 in Netbeans will allow us to 
continue until the page is loaded. To prevent Netbeans 
from stopping at the first line of your code (even if a break- 
point is not set) disable this in the settings (Figure 21). 
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Figure 18. Once debugger has completed, page is displayed 
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Figure 19. Saving code remotely 
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Figure 21. Disabling debugger stopping at the first line 
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Figure 22. Adding new page content 
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| 
Figure 23. We have a bug! 


Editing and uploading code 

Edit line 60 of index.php and comment out the echo state- 
ment. When the file is saved, it should be uploaded to the 
remote server for you (Figure 19 — 20). 


Our first challenge 

With the debugger running, log in to the CMS and add 
some content (Figure 22 — 23). Why is the content not be- 
ing saved? The answer is at the bottom of the article. 


The code 

The full code for this project is available at https://github. 
com/merville/FreeBSD_CMS complete with the database 
backup which is stored in DUMP.sql. Please note that you 








Useful links 
- Xdebug: http://xdebug.org 
« Netbeans: http:/php.net/manual 











will have to modify cms.inc to meet your own environ- 
ment. Please note that in its current form this project is 
not suitable for production use. 


So what next? 

There are many additional functions our CMS could use, 

help for user adding content, filtering to check that HTML en- 

tered is valid, a facility for uploading photos, additional mod- 

ules for chat, XML feeds, you name it — the sky is the limit. 
The next Howto series will cover image manipulation 

with the Gimp. 


Solution 

Line 365 of amendcontent.php only displays the changes, 
they are not committed to the database. For example of 
this, see the logip() function. 
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and nixie tubes but keeps a soldering iron handy just in case. 
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